想要实现的效果图
思路:图片与遮罩层相对定位,将遮罩层的背景图也设置为该图片,再利用高斯模糊,将背景图模糊处理,图片本身的层级高于遮罩层,达到这样的效果
<div class="box">
<img src="../../assets/img/test.png" alt="" class="img">
<div class="mh"></div>
</div>
.box {
width: 100px;
height: 100px;
border: solid 1px #888;
position: relative;
.img {
width: 60px;
margin: auto;
position: relative;
z-index: 100;
}
.mh {
position: absolute;
width: 20px;
height: 50px;
background-image: url(../../assets/img/test.png);
top: 15px;
left: 38px;
filter: alpha(opacity=90);
opacity: 0.6;
filter: blur(5px);
background-position: center center;
background-size: cover;
}
}