前言
在微信小程序开发的时候，也会遇到一些和在前端开发一样的样式需求，二者的相通类似性非常的高，就拿样式相关的需求来说，可以说是一模一样的操作。那么本文就来分享一个关于实现高斯模糊效果的需求，微信小程序和前端的操作一样，这里只来介绍一下微信小程序实现高斯模糊效果的实现。
首先来了解一下高斯模糊效果（俗称毛玻璃效果），高斯模糊效果是一种常见的效果，在前端开发过程中（包括微信小程序开发）设置高斯模糊效果主要是直接在CSS中使用filter、backdrop属性都可以实现该效果。
一、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%);
}
效果图如下所示：
最后
通过上面介绍的关于微信小程序开发中实现高斯模糊效果（毛玻璃效果），往后再在微信小程序开发中遇到类似需求就可以很好的解决了，这也是在开发过程中必用的功能，尤其是对于初级开发者来说，更应该掌握这些情况的使用，这里不再赘述。以上就是本章的全部内容，欢迎关注三掌柜！
