CSS backdrop-filter实现背景毛玻璃效果

目录
文章目录隐藏
  1. CSS 背景滤镜 backdrop-filter
  2. 结语

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(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* 关键字值 */
filter: none;

/* URL 方式外链 SVG filter */
filter: url(zxx.svg#filter);

/* <filter-function>值 */
filter: blur(2px);
filter: brightness(60%);
filter: contrast(40%);
filter: drop-shadow(4px 4px 10px blue);
filter: grayscale(30%);
filter: hue-rotate(120deg);
filter: invert(70%);
filter: opacity(20%);
filter: sepia(90%);
filter: saturate(80%);

各个滤镜方法对应含义如下表:

滤镜 释义
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);	
}

结果黑色半透明背景后面的内容都模糊了:

CSS backdrop-filter 实现背景毛玻璃效果

这种模糊与背景的半透明度没有任何关系,例如,我们修改背景色透明度较低,甚至完全透明,后面内容依然是模糊状态:

CSS backdrop-filter 实现背景毛玻璃效果

案例二:下拉毛玻璃

我们以前实现下拉效果,下拉层一定会有一个实色背景,就像下面这样的:

CSS backdrop-filter 实现背景毛玻璃效果

现在有了 backdrop-filter,我们实现的效果可以一下子变得非常高大上了,就像下面这样:

CSS 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);   
    }
}

不影响老代码,全新的浏览器又有高大上的效果,只要不是非常大开销的页面,都可以非常愉快、快乐,开心地使用起来。

结语

结语没什么好说的,放一组老师的截图吧。

backdrop-filter 实现下拉毛玻璃效果

并不算特别好的番,比较低龄,纯粹是为了素材,如封面之类看看的。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS backdrop-filter实现背景毛玻璃效果

2 评论

  1. 我有个朋友想问问那是什么番

发表回复