微信小程序开发：实现毛玻璃效果
前言
一、filter
通过直接在CSS中使用filter来设置实现高斯模糊效果，其实filter是一种“假模糊”，因为需要一层做背景并且使用filter属性来达到模糊效果，另外一层（需要在背景层上面 ）设置一个半透明的背景色，二者结合使用，才能达到模糊效果。
具体示例如下所示：
.matter-view {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
opacity: 0.6;
filter: alpha(opacity=60); //设置filter属性
}
二、backdrop-filter
通过直接在CSS中使用backdrop-filter来设置高斯模糊效果，backdrop-filter属性其实可以让开发者为一个元素后面区域添加图形效果，因为它适用于元素背后的所有元素，为了能够看到效果，必须使元素或者背景设置为部分透明。
通过使用backdrop-filter配合背景色的方法如下所示：
设置backdrop-filter : blur()属性，并且结合background : rgba()来实现按钮的高斯模糊效果。
使用backdrop-filter的优点：
- 使用backdrop-filter的这种方式可以省去多设置一个after伪类来进行背景模糊的步骤，简洁方便；
- backdrop-filter : blur()是自动把该元素后面的背景进行模糊处理，而不需指定固定的背景来进行高斯模糊。
具体设置css样式为高斯模糊效果的示例如下所示：
.end-view {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: rgba(255,255,255,0.5); //设置半透明背景
backdrop-filter: blur(2px); //设置backdrop-filter属性
text-align: center;
padding: 32rpx 0;
}
.save-btn {
width: 585rpx;
height: 80rpx;
background: #49b454;
border-radius: 40px;
margin-left: 50%;
transform: translateX(-50%);
}
