Html CSS向圆形图像添加不透明颜色覆盖

我正在尝试将一个图像裁剪成一个圆形，并应用一个顶部有文本的灰色过滤器。我遇到的问题是双重的。第一，由于我的系统允许用户将图像上传为个人资料图片，因此圆形剪辑路径的大小会根据原始图像的大小而变化，这反过来又不允许我在图像上放置适当的灰色过滤器。有关于如何解决这个问题的建议吗？最终结果应该是右边的图像是一个带有灰色过滤器的圆

代码笔：

HTML:

---

对于颜色叠加，您可以将

亮度（）

和

色调旋转（）

规则一起用于

.secondary

。像这样：

.secondary {
   ...
   filter: brightness(0.5) hue-rotate(90deg);
}

.pic{clip path:circle（）；}
.primary{z-索引：3}
。次要{z-指数：0；左边距：-50px；底部距：-30px；
滤镜：亮度（0.5）色调旋转（90度）；
}
.large.primary{宽度：220px}
.large.secondary{宽度：170px}
.small.primary{宽度：150px}
.small.secondary{宽度：116px}
.pic img{float:右侧；最大宽度：100%；最大高度：100%；显示：块；}
.中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；}
.secondary img{object fit:cover}
.picgroup{位置：相对}
.小型.图片组：之前{
宽度：116px；高度：116px；
页边距顶部：20px；}
/*.大型.图片组：之前{
宽度：150%；高度：150%；
页边距顶部：-30px；}*/
.picgroup:之前{
内容：“；
位置：绝对位置；
顶部：0；左侧：0；
左边距：-50px；
剪辑路径：圆形（）；
背景：rgba（0,0,0,0.5）；
z指数：2；
}
.picgroup.count{
字体大小：50px；
颜色：#E5；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-65%，-50%）；
z索引：2；}

+14

为什么不应用

过滤器：亮度（）

？太好了，可以了！非常感谢。为了便于学习，如果我希望最终结果是绿色或粉红色的叠加，我该怎么做？您可以使用“绝对位置”在图像顶部放置一个元素，并提供背景色和不透明度，使其成为您想要的。绝对元素的高度和宽度应相同though@ZiaAhmad是的，我试过这样做，但正如我在原始帖子中所说的，用户可以上传他们自己的图片，所以我无法预测其高度和宽度。实际上，您可以限制父div（图像位于）的高度和宽度，并将图像设置为100%宽度

.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;}

.secondary {
   ...
   filter: brightness(0.5) hue-rotate(90deg);
}