本文将介绍一种使用background配合backdrop-filter制作有趣的透视背景效果的方法。这个技巧来源于群友的一个问题，如何像ElementUI[1]文档那样搭建topbar背景特效，看效果：仔细看，在页面滚动的过程中，topbar不是白色，不是磨砂玻璃效果，但是可以颗粒化背景：准确的说，是基于颗粒化的毛玻璃效果。首先对元素进行颗粒化处理，其次对元素的边缘也进行一定程度的模糊处理。那么，我们如何实现这种效果呢？需求拆解以上效果看似神奇，其实原理很简单。主要是颗粒状背景background加上backdrop-filter:blur()。首先，我们需要实现颗粒状背景。我们使用background来实现这样的背景：
div{background:radial-gradient(transparent,#00020px);background-size:40px40px;}从透明到黑色的径向渐变效果如下：required注意图片中的白色部分实际上是透明的，可以显露出背后的背景。此时，如果背景后面有元素，效果会是这样的：OK，我们将背景中的黑色：radial-gradient(transparent,#00020px)换成白色，效果如下：在为了展示原理，每个径向渐变渐变圈设置的比较大，我们调整回正常大小：div{background:radial-gradient(transparent,rgba(255,255,255,1)2px);background-size:4px4px;}这样，我们的背景就成功颗粒化了：当然，此时暴露出来的背景看起来很生硬，不美观，所以我们还需要backdrop-filter:blur()，我们来添加尝试：div{background:radial-gradient(transparent,rgba(255,255,255,1)2px);背景大小：4px4px；background-filter:blur(10px);}这样我们就实现了开头所示的效果：这里需要注意的是background-size的尺寸控制和不同的background-filter:blur(10px)值会影响效果。完整的DEMO，您可以点击这里：CodePenDemo--MaskFilter[2]。当然，掌握了这个技巧后，我们可以尝试更换背景：radial-gradient()图形，改变background-size，尝试各种不同形状的透视背景。举几个例子：div{background:linear-gradient(45deg,transparent,#fff4px);背景大小：6px6px；backdrop-filter:saturate(50%)blur(4px);}linear-Gradient()replacesradila-gradient():最后一个非常小的trick，用在合适的地方，可以很好的提升页面的质感，有你学会了吗？本文到此结束，希望对你有所帮助：）参考文献【1】ElementUI：https://element-plus.gitee.io/zh-CN/。[2]CodePen演示——蒙版过滤器：https://codepen.io/Chokcoco/pen/LYdWPbz。[3]Github——iCSS：https://github.com/chokcoco/iCSS。