CSS添加半透明颜色覆盖到圆形图片

Question

我试图将一张图片裁剪成圆形并在其上应用灰色滤镜并加上文字。我遇到的问题有两个。首先，由于我的系统允许用户上传图像作为个人资料图片，因此圆形剪裁路径的大小取决于原始图像的大小，这导致我无法正确地在图像上应用灰色滤镜。请问有关于如何解决这个问题的建议吗？最终结果应该是右侧的图像为带有灰色滤镜的圆形。

代码演示地址：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;}

- user14919988

---

为什么不想使用 filter: brightness() ？ - s.kuznetsov

太好了，可以用！谢谢。为了学习，如果我想要最终结果是绿色或者粉色的叠加层，我该怎么做呢？ - user14919988

你可以使用绝对定位将元素放在图像上方，并给它一个背景颜色，通过调整不透明度来达到你想要的效果。绝对定位的元素应该具有相同的高度和宽度。 - Zia Ahmad

@ZiaAhmad 对的，我尝试过这样做，但正如我在原帖中所说，用户可以上传自己的图片，因此我无法预测其高度和宽度。 - user14919988

实际上，您可以限制包含图像的父级 div 的高度和宽度，并将图像设置为 100% 宽度。 - Zia Ahmad

Answer 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>

- s.kuznetsov