彩色阴影:
实现图片阴影与图片一一致;
.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;
}
}
实现图片阴影与图片一一致;
.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;
}
}
展开
评论
点赞
一长串代码好啰嗦啊 阅读也不好阅读