本文将介绍一种巧妙地使用background和backdrop-filter制作有趣的透视背景效果的方法。这个技巧来自一群朋友的提问，如何像ElementUI文档一样搭建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当然，掌握了这个技巧之后，我们可以尝试更换背景：radial-gradient()图形，改变background-size，尝试各种视角的不同的形状背景。举几个例子：div{background:linear-gradient(45deg,transparent,#fff4px);背景大小：6px6px；backdrop-filter:saturate(50%)blur(4px);}linear-Gradient()replacesradila-gradient():最后一个非常小的trick，用在合适的地方，可以很好的提升页面的质感，有你学会了吗？本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。