CSS backdrop-filter实现背景毛玻璃效果
CSS 背景滤镜 backdrop-filter
有人说 backdrop-filter 和 filter 的语法类似。错!不是类似,是一模一样,如出一辙,毫无二致。
看下面的对比表:
backdrop-filter 语法 | filter 语法 |
---|---|
/* 关键字值 */ backdrop-filter: none; /* URL 方式外链 SVG filter */ backdrop-filter: url(zxx.svg#filter); /* <filter-function>值 */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow |
/* 关键字值 */ filter: none; /* URL 方式外链 SVG filter */ filter: url(zxx.svg#filter); /* <filter-function>值 */ filter: blur(2px); filter: brightness(60%); filter: contrast(40%); filter: drop-shadow |
各个滤镜方法对应含义如下表:
滤镜 | 释义 |
---|---|
blur | 模糊 |
brightness | 亮度 |
contrast | 对比度 |
drop-shadow | 投影 |
grayscale | 灰度 |
hue-rotate | 色调变化 |
invert | 反相 |
opacity | 透明度 |
saturate | 饱和度 |
sepia | 褐色 |
然后各个滤镜大致效果可以参见之前这篇文章:“干货分享 css 滤镜与混合模式”,这里就不一一展示了,唯一需要演示的就是文章一开始提到的毛玻璃效果。
backdrop-filter 和 filter 区别
backdrop-filter 是让当前元素所在区域后面的内容模糊灰度或高亮之类,要想看到效果,需要元素本身半透明或者完全透明;而 filter 是让当前元素自身模糊灰度或高亮之类。
我们来通过毛玻璃效果的案例来感受一下 backdrop-filter 的实际效果。
案例一:弹框毛玻璃
点击按钮,会打开一个弹框,其中,弹框增加了下面这段 CSS:
dialog { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
结果黑色半透明背景后面的内容都模糊了:
这种模糊与背景的半透明度没有任何关系,例如,我们修改背景色透明度较低,甚至完全透明,后面内容依然是模糊状态:
案例二:下拉毛玻璃
我们以前实现下拉效果,下拉层一定会有一个实色背景,就像下面这样的:
现在有了 backdrop-filter,我们实现的效果可以一下子变得非常高大上了,就像下面这样:
透出模糊的背后元素,在 web 中不太常见的毛玻璃就横空出世,应运而生,跃然纸上。
实现非常简单,只要把下拉容器原来的实色 background-color 变成半透明,再设置一个 backdrop-filter blur()模糊就可以了:
.ui-droplist-x { background: hsla(0, 0%, 100%, .75); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
就这么简单,赶快自己在自己的项目中用起来吧,渐进增强使用。
.some-class-mybj { background-color: #fff; } @supports (-webkit-backdrop-filter:none) or (backdrop-filter:none) { .some-class-mybj { background: hsla(0, 0%, 100%, .75); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } }
不影响老代码,全新的浏览器又有高大上的效果,只要不是非常大开销的页面,都可以非常愉快、快乐,开心地使用起来。
结语
结语没什么好说的,放一组老师的截图吧。
并不算特别好的番,比较低龄,纯粹是为了素材,如封面之类看看的。
码云笔记 » CSS backdrop-filter实现背景毛玻璃效果
我有个朋友想问问那是什么番
没看懂你说的啥意思