微信小程序实现弹窗毛玻璃效果
作者:互联网
微信小程序实现毛玻璃弹窗效果
使用方法:
使用 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的毛玻璃效果啦~
标签:程序实现,微信,filter,backdrop,background,blur,250,毛玻璃 来源: https://www.cnblogs.com/windyz99/p/12905253.html