Vue+css realizes simple background frosted glass effect

0. The effect is as shown in the figure.

1. First set the background as a dynamic picture, preferably the same picture as the original picture.

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

The following is the data part for easy understanding

data() {
    
    
	return {
    
    
		imgList:['https://img.yzcdn.cn/vant/cat.jpeg','https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
	};
},

2. Adapt the background image to fill the entire background space.

.info-img-item{
    
    
	margin-right: 16rpx;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

3. Set the background-filter property of the internal picture to achieve the frosted glass effect.

Note: directly using blur (pixel value) will blur the target element as a whole, while backdrop-filter: blur (pixel value) will only blur the background and produce a frosted glass effect

.info-img-item info-img{
    
    
		backdrop-filter: blur(5px);
		width:192rpx;
		height:192rpx;
	}