微信小程序实现弹窗毛玻璃效果

微信小程序实现毛玻璃弹窗效果

使用方法：
使用 backdrop-filter : blur()配合background : rgba()来实现弹窗的毛玻璃效果。

优点：

• 这种方式省去了多设置一个after伪类来进行背景模糊的麻烦
• 而且backdrop-filter : blur()是自动把该元素后面的背景进行模糊处理，而不需要指定固定的背景来进行模糊

Demo代码：

WXML 页面：

<view class='bg_contain'>
	<view class='blur_demo'></view>
</view>


WXSS 样式：

.bg_contain {
	background-image: url('./image_demo.jpg');
}

.blur_demo {
	background: rgba(250,250,250,0.6);
	backdrop-filter: blur(10px);
}

完成了以上代码后，就可以实现一个类似于IOS的毛玻璃效果啦~