本篇文章将介绍一种巧用 background
配合 backdrop- filter
来构建有趣的透视背景效果的方式,希望对大家有所帮助!
本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果:
仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒化:
准确而言,是一种基于颗粒化的毛玻璃效果,元素首先是被颗粒化,其次,元素的边缘也是在一定程度上被虚化了。那么,我们该如何实现这个效果呢?
上述效果看似神奇,其实原理也非常简单。主要就是颗粒化的背景 background加上backdrop-filter: blur()
即可。
首先,我们需要实现颗粒背景。
我们利用 background
实现这样一个背景:
<div></div>
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 构建花式透视背景的详细内容,更多请关注php中文网其它相关文章!