本篇文章将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式，希望对大家有所帮助！
本技巧源自于一名群友的提问，如何构建如 ElementUI 文档的一种顶栏背景特效，看看效果：
仔细看，在页面的的滚动过程中，顶栏的背景不是白色的，也不是毛玻璃效果，而是能够将背景颗粒化：
立即学习“前端免费学习笔记（深入）”；
准确而言，是一种基于颗粒化的毛玻璃效果，元素首先是被颗粒化，其次，元素的边缘也是在一定程度上被虚化了。那么，我们该如何实现这个效果呢？
需求拆解
上述效果看似神奇，其实原理也非常简单。主要就是颗粒化的背景 background加上backdrop-filter: blur() 即可。
首先，我们需要实现颗粒背景。
我们利用 background 实现这样一个背景：
div { background: radial-gradient(transparent, #000 20px); background-size: 40px 40px;}
从透明到黑色的径向渐变效果如下：
需要注意的是，图里的白色部分其实透明的，可以透出背后的背景。此时，如果背景后面有元素，效果就会是这样：
好，我们将 background: radial-gradient(transparent, #000 20px) 中的黑色替换成白色，效果如下：
这里为了展示原理，每个径向渐变的圆设置的比较大，我们把它调整回正常大小：
div { background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px); background-size: 4px 4px;}
这样，我们就成功的将背景颗粒化：
当然，此时透出的背景看上去非常生硬，也不美观，所以，我们还需要 backdrop-filter: blur()，我们加上一个试试看：
div { background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px); background-size: 4px 4px; backdrop-filter: blur(10px);}
这样，我们就实现了一开始所展示的效果：
这里需要注意的是，background-size 的大小控制，和不同的 backdrop-filter: blur(10px) 值，都会影响效果。
完整的 DEMO，你可以戳这里：CodePen Demo — Mask Filter
当然，掌握了这个技巧之后，我们可以尝试替换掉 background: radial-gradient() 图形，及改变 background-size，尝试各种不同形状的透视背景。简单举几个例子：
div { background: linear-gradient(45deg, transparent, #fff 4px); background-size: 6px 6px; backdrop-filter: saturate(50%) blur(4px);}
这里使用了 linear-gradient() 替换了 radila-gradient()：
原文地址：https://www.cnblogs.com/coco1s/p/16549752.html作者：ChokCoco
更多编程相关知识，请访问：编程视频！！
以上就是聊聊怎么利用 CSS 构建花式透视背景的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625113.html
微信扫一扫 
支付宝扫一扫 
