<div class="color-shadow">
<img src="..." alt="" />
</div>
.color-shadow {
position: relative;
width: 200px;
height: 200px;
img {
width: 100%;
height: 100%;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
object-fit: cover;
}
&::after {
content: "";
position: absolute;
left: 0;
top: 10%;
width: 100%;
height: 100%;
border-radius: 100%;
background: url(...) no-repeat center/cover;
filter: blur(10px) brightness(80%) opacity(0.8);
transform: scale(0.95);
z-index: 1;
}
}
TIP
SCSS
可以简化,但是这样写是问题最少的。