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;
	}