vue+css实现简单的背景毛玻璃效果
0、效果如图。
1、先将背景设为动态图片,最好是跟原图片一样的图片。
<view class="info-img-item" v-for="(item, index) in imgList" :style="{backgroundImage:'url(' + item + ')'}" :key="index">
<image class="info-img" @click="previewImage(imgList, index)" :src="item" mode="aspectFit"/>
</view>
以下是data部分便于理解
data() {
return {
imgList:['https://img.yzcdn.cn/vant/cat.jpeg','https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
};
},
2、将背景图片自适应,让其占满整个背景空间。
.info-img-item{
margin-right: 16rpx;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
3、将内部图片设置backdrop-filter属性,实现毛玻璃效果。
注:直接使用 blur(像素值) 会使目标元素整体模糊,而 backdrop-filter: blur(像素值) 只会是背景模糊产生毛 玻璃效果
.info-img-item info-img{
backdrop-filter: blur(5px);
width:192rpx;
height:192rpx;
}