Блог

Главная - Вопросы по программированию - CSS добавление наложения непрозрачного цвета на изображение круга

CSS добавление наложения непрозрачного цвета на изображение круга

#html #css

#HTML #css

Вопрос:

Я пытаюсь обрезать изображение в круг и применить фильтр серого цвета с текстом сверху. Проблема, с которой я сталкиваюсь, двоякая. Во-первых, поскольку моя система позволяет пользователям загружать изображения в виде изображения профиля, размер контура клипа круга изменяется в зависимости от размера исходного изображения, что, в свою очередь, не позволяет мне наложить на изображение правильный фильтр серого цвета. Есть какие-либо советы о том, как это исправить? Конечным результатом должно быть изображение справа в виде круга с фильтром серого цвета.

CodePen: https://codepen.io/dansbyt/pen/wvzyJzj

HTML:

 <div class="center">
  <img class='pic large primary' src='../resources/pics/23.png'>
  <div class='picgroup large'>
    <div class='count'> 14</div>
    <img class='pic large secondary' src='../resources/pics/81.png'>
  </div>
</div>

CSS:

 .pic {clip-path: circle();}
.primary {z-index: 3}
.secondary {z-index: 0; margin-left: -50px; margin-bottom: -30px}
.large.primary {width: 220px}
.large.secondary {width: 170px}
.small.primary {width: 150px}
.small.secondary {width: 116px}
.pic img{float:right; max-width: 100%; max-height: 100%; display: block;}

.center {
  display: flex;
  justify-content: center;
  align-items: center;}

.secondary img{object-fit: cover}

.picgroup {position: relative}
.small.picgroup:before {
  width:116px; height: 116px;
  margin-top: 20px;}
.large.picgroup:before {
  width:150%; height: 150%;
  margin-top: -30px;}
.picgroup:before {
  content:"";
  position: absolute;
  top:0; left:0;
  margin-left: -50px; 
  clip-path: circle();
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

.picgroup .count {
  font-size: 50px;
  color: #E5E5E5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-65%, -50%);
  z-index: 2;}

Комментарии:

1. Почему вы не хотите подавать filter: brightness() заявку?

2. Боже, это работает! Спасибо. Ради обучения, как бы я это сделал, если бы хотел, чтобы конечный результат был зеленым или, может быть, розовым наложением?

3. вы можете поместить элемент поверх изображения, используя абсолютную позицию, придать цвет фона и поиграть с непрозрачностью, чтобы сделать его таким, как вы хотите. абсолютный элемент должен быть одинаковой высоты и ширины, хотя

4. @ZiaAhmad Правильно, я пытался это сделать, но, как я уже говорил в исходном сообщении, пользователи могут загружать свои собственные изображения, поэтому я не могу предсказать высоту и ширину.

5. на самом деле вы можете ограничить высоту и ширину родительского div (в котором находится изображение) и установить для изображения ширину 100%

Ответ №1:

Для наложения цвета вы можете использовать brightness() hue-rotate() правила и вместе для .secondary . Вот так:

 .secondary {
   ...
   filter: brightness(0.5) hue-rotate(90deg);
}
 
 .pic {clip-path: circle();}
.primary {z-index: 3}

.secondary {z-index: 0; margin-left: -50px; margin-bottom: -30px;
filter: brightness(0.5) hue-rotate(90deg);
}

.large.primary {width: 220px}
.large.secondary {width: 170px}
.small.primary {width: 150px}
.small.secondary {width: 116px}
.pic img{float:right; max-width: 100%; max-height: 100%; display: block;}

.center {
  display: flex;
  justify-content: center;
  align-items: center;}

.secondary img{object-fit: cover}

.picgroup {position: relative}
.small.picgroup:before {
  width:116px; height: 116px;
  margin-top: 20px;}
  
/*.large.picgroup:before {
  width:150%; height: 150%;
  margin-top: -30px;}*/
  
.picgroup:before {
  content:"";
  position: absolute;
  top:0; left:0;
  margin-left: -50px; 
  clip-path: circle();
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

.picgroup .count {
  font-size: 50px;
  color: #E5E5E5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-65%, -50%);
  z-index: 2;} 
 <div class="center">
  <img class='pic large primary' src='https://mrdansby.com/resources/pics/23.png'>
  <div class='picgroup large'>
    <div class='count'> 14</div>
    <img class='pic large secondary' src='https://mrdansby.com/resources/pics/81.png'>
  </div>
</div>