本文主要是介绍小程序实现毛玻璃的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
利用css的filter这个属性实现，在有弹框弹出的时候背景出现高斯模糊的效果
写个小例子记录一下，这个是背景是地图的情况下，做的处理，不管是文字还是图片什么的，在弹出框出来的时候给背景添加filter:blur(20rpx)中间值的模糊程度。
wxml部分 给地图用一个标签包着，直接添加到地图上也可以，但是为了更好的控制地图的样式，我就用了一个标签包着地图，放在了地图的盒子上一样的效果，为了展示方便样式就写在了行内，不推荐
点击遮罩
.shadow{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
z-index: 200;
}
js部分
//显示遮罩
click:function(){
console.log(‘点击遮罩’)
this.setData({
blur: 20+'rpx',shadowShow: true})wx.showModal({title: '提示',content: '确认取消吗',})
},
//隐藏遮罩
hiddenShow:function(){
this.setData({
shadowShow:false,
blur: 0 + ‘rpx’,
})
},
这篇关于小程序实现毛玻璃的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
