我试图将一张图片裁剪成圆形并在其上应用灰色滤镜并加上文字。我遇到的问题有两个。首先,由于我的系统允许用户上传图像作为个人资料图片,因此圆形剪裁路径的大小取决于原始图像的大小,这导致我无法正确地在图像上应用灰色滤镜。请问有关于如何解决这个问题的建议吗?最终结果应该是右侧的图像为带有灰色滤镜的圆形。
代码演示地址: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;}
filter: brightness()
? - s.kuznetsov