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

使用方法：

使用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的毛玻璃效果啦~