标签：程序实现 微信 filter backdrop background blur 250 毛玻璃

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

使用方法：
使用 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。