CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到
- 最基本的使用 CSS
backdrop-filter
实现磨砂玻璃(毛玻璃)的效果 - 在至今不兼容
backdrop-filter
的 firefox 浏览器,如何利用一些技巧性的操作,巧妙的同样实现毛玻璃效果,让这个效果真正能运用在业务当中
什么是 backdrop-filter
backdrop-filter
CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
backdrop-filter
与 filter
非常类似,可以取的值都是一样的,但是一个是作用于整个元素,一个是只作用于元素后面的区域。
backdrop-filter
与 filter
对比
我们使用 backdrop-filter
与 filter
同时实现一个毛玻璃效果作为对比,伪代码如下:
<div class="bg">
<div>Normal</div>
<div class="g-filter">filter</div>
<div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
background: url(image.png);
& > div {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, .7);
}
.g-filter {
filter: blur(6px);
}
.g-backdrop-filter {
backdrop-filter: blur(6px);
}
}
CodePen Demo -- filter 与 backdrop-filter 对比
在 backdrop-filter
之前,想实现上述的只给元素背景添加滤镜效果还是非常困难的,并且,对于静态画面还好,如果背景还是可以滚动的动态背景,通常 CSS 是无能为力的。
backdrop-filter
正是为了给元素后的内容添加滤镜而不影响元素本身而诞生的。使用它可以非常方便的实现磨砂玻璃效果(毛玻璃)!
backdrop-filter
的兼容性
backdrop-filter
其实已经诞生挺久了,然而,firefox 至今都不兼容它!
对于部分已经放弃了 IE 的 PC 端业务而言,firefox 还是需要兼容的,想要让使用 backdrop-filter
实现毛玻璃效果应用落地,firefox 的兼容问题必须得解决。
在 firefox 中实现毛玻璃效果
OK,本文的重点就是在于如何在 firefox 中,不使用 backdrop-filter
而尽可能的还原毛玻璃的效果。
首先看一下,如果是正常使用 backdrop-filter
,还是上述的例子效果如下,是没有毛玻璃效果的:
使用 background-attachment: fixed 兼容静态背景图
如果在 firefox 上想使用毛玻璃效果。应用毛玻璃元素的背景只是一张静态背景图,其实方法是有很多的。
我们只需在元素的背后,叠加一张同样的图片,利用 background-attachment: fixed
将叠加在元素下面的图片定位到与背景相同的坐标,再使用 filter: blur()
对其进行模糊处理即可。
伪代码如下:
<div class="g-glossy">frosted glass effect </div>
$img: 'https://static.pexels.com/photos/373934/pexels-photo-373934.jpeg';
body {
height: 100vh;
display: flex;
background-image: url($img);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.g-glossy {
position: relative;
width: 600px;
height: 300px;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
z-index: 10;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url($img);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
filter: blur(10px);
z-index: -1;
}
}
效果如下:
此方法也是在没有 backdrop-filter
之前,在各个浏览器想实现简单毛玻璃效果最常用的方法之一。
CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 实现毛玻璃效果
使用 background-attachment: fixed 兼容静态背景图的缺点
不过这种方法也有两个缺点:
- 由于使用了伪元素叠加了一层背景,因为层级关系,父元素的 background 是在最下层的,所以元素本身的背景色其实并没有被充分体现,可以对比下两种方法的实际效果图:
解决方案是再通过另外一个伪元素再叠加一层背景色,这个背景色应该是原本赋值给父元素本身的。
叠加之后的效果如下:
CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 实现毛玻璃效果优化
- 上述效果已经非常接近了,硬要挑刺的话,就是应用了模糊滤镜的伪元素的边缘有白边瑕疵,这一点其实是滤镜本身的问题,也非常好解决,我们只需要将伪元素的范围扩大一点即可:
.g-glossy {
overflow: hidden;
....
&::before {
content: "";
position: absolute;
top: -100px;
left: -100px;
right: -100px;
bottom: -100px;
}
}
定位的代码由 top: 0px;
改为 top: -100px
,四个方位都是如此即可。如此一来,就能做到基本上是百分百的模拟。
使用 moz-element()
配合 filter: blur()
实现复杂背景毛玻璃效果
下面这种方法就非常巧妙了,正常而言,运用毛玻璃效果的背景元素,都不是一张图片那么简单!背后通常都是整个页面复杂的结构,多层 DOM 的嵌套。
那么通过叠加一张简单的图片,就无法奏效了,我们得想办法模拟整个 DOM 元素。
而恰好,在 Firefox 中,有这么一个属性 -- -moz-element()
。
何为 -moz-element()
?MDN-element 的解释是,CSS 函数 element()
定义了一个从任意的 HTML 元素中生成的图像 <image>
值。该图像值是实时的,这意味着如果被指定的 HTML 元素被更改,应用了该属性的元素的背景也会相应更改。
它其实是个草案规范,但是一直以来,只有 Firefox 支持它 -- CAN I USE -- CSS element():
它有什么作用呢?
-moz-element()
如何使用
那么 -moz-element()
如何使用呢?简而言之,它能够复制一个元素内部渲染出来的 UI,并且能够实时同步变化。
假设我们有这样一个简单的结构,元素背景和内容都在运动:
<div id="bg" class="g-normal">
<p>Content</p>
</div>
.g-normal {
margin: auto;
width: 200px;
height: 200px;
animation: change 5s infinite;
background: linear-gradient(deeppink, yellowgreen);
}
p {
animation: move 5s infinite;
}
@keyframes change {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(150px, 150px);
}
}
它的效果大概是这样:
我们就假设这个结构就是我们页面某一块的内容,然后,我们就可以使用 background: -moz-element(#id)
这种方式,将这个元素内绘制的 UI 内容完全拷贝至另外一个元素,看看效果。
我们添加一个元素 <div class="g-element-copy"></div>
,在这个元素内模拟 #bg
内的内容:
<div id="bg" class="g-normal">
<p>Content</p>
</div>
<div class="g-element-copy"></div>
.g-element-copy {
margin: auto;
width: 200px;
height: 200px;
// 核心代码
background: -moz-element(#bg);
}
它可以完全复制另外一个元素内绘制出来的 UI,并且能追踪实时变化:
CodePen Demo -- -moz-element Demo(Firefox Only)
在 firefox 中使用 element 复制 UI,用作毛玻璃元素背景
这样,有了上面的铺垫,下面的内容就比较好理解了。
和上述的 background-attachment: fixed
方案对比,我们还是通过伪元素叠加一层背景,只不过背景内的内容由单纯一张图片,变成了由 -moz-element()
复制的整段 UI 内容。
其次,上面的方案我们使用 background-attachment: fixed
使背景图和伪元素内叠加的图片的位置对齐,在这里,我们需要借助 Javascript 进行简单的运算,确定背景内容元素的相关位置,计算对齐量。
来看这样一个 DEMO:
<div id="bg" class="bg">
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
<div>模拟真实 DOM</div>
</div>
<div class="g-glossy">frosted glass effect </div>
<div class="g-glossy-firefox"></div>
其中,.g-glossy
是在正常情况下 backdrop-filter
兼容时,我们的毛玻璃元素,而 .g-glossy-firefox
则是不兼容 backdrop-filter
时,我们需要模拟整个 DOM 背景 UI时候的元素,可以通过 CSS 特性检测 CSS @support
进行控制:
核心 CSS 代码:
.bg {
// 整个页面的 DOM 结构
}
.g-glossy {
position: fixed;
width: 600px;
height: 300px;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.g-glossy-firefox {
display: none;
}
@supports (background: -moz-element(#bg)) {
.g-glossy-firefox {
display: block;
position: fixed;
width: 600px;
height: 300px;
background: -moz-element(#bg) no-repeat;
filter: blur(10px);
}
}
简单解读一下:
- 对于兼容
backdrop-filter
的,.g-glossy
内的代码将直接生效,并且.g-glossy-firefox
不会展示 - 对于 Firefox 浏览器,因为
backdrop-filter
必然不兼容,所以.g-glossy
内的backdrop-filter: blur(10px)
不会生效,而@supports (background: -moz-element(#bg))
内的样式会生效,此时.g-glossy-firefox
将会利用background: -moz-element(#bg) no-repeat;
模拟 id 为bg
的元素
当然,这里我们需要借助一定的 JavaScript 代码,计算我们的模拟页面 UI 的元素 .g-glossy-firefox
相对它模拟的 #bg
元素,也就是页面布局的一个定位偏差:
$(function() {
let blur = $('.g-glossy-firefox')[0].style;
let offset = $('.g-glossy').eq(0).offset();
function updateBlur() {
blur.backgroundPosition =
`${-window.scrollX - offset.left}px ` +
`${-window.scrollY - offset.top}px`;
}
document.addEventListener('scroll', updateBlur, false), updateBlur();
});
OK,至此,我们就能完美的在 Firefox 上也实现毛玻璃的效果了:
它相对于上面的第一种方案而言,最大的不同之处在于,它可以模拟各式各样的背景元素,背景元素可以不仅仅只是一张图片!它可以是各种复杂的结构!
这种方案是我的 CSS 群中,风海流
同学提供的一种思路,非常的巧妙,并且,他自己也对这种方案进行了完整的阐述,你可以戳这里看看:在网页中实现标题栏「毛玻璃」效果,本文也是经过他的同意,重新整理发出。
上述效果的完整代码,你可以戳这里:
CodePen Demo -- 兼容 Firefox 的复杂背景毛玻璃(磨砂玻璃)效果
总结一下
简单对上述内容进行一个总结:
- 你可以使用
backdrop-filter
对兼容它的浏览器非常简单的实现毛玻璃(磨砂玻璃)效果 - 对于不兼容
backdrop-filter
的浏览器,如果它只是简单背景,可以使用background-attachment: fixed
配合filter: blur()
进行模拟 - 对于 firefox 浏览器,你还可以使用
moz-element()
配合filter: blur()
实现复杂背景毛玻璃效果 - 对于不兼容的上述 3 种效果的其他浏览器,设置了毛玻璃效果的元素,可以通过设置类似
background: rgba(255, 255, 255, 0.5)
的样式,使之回退到半透明效果,也算一种非常合理的降级效果,不会引起 Bug
最后
好了,本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
CSS 奇思妙想 | 全兼容的毛玻璃效果的更多相关文章
- 《CSS揭秘》之毛玻璃效果知识点
实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...
- 用CSS伪类实现毛玻璃效果
效果图: 思路: 内容容器需要一个before伪类,负责引用跟背景容器相同的背景图,还需要一个after伪类,用来加上半透明的白色背景.这两个伪类的层级需都为-1,而内容容器本身的层级为1,这样做可以 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- CSS遮罩效果和毛玻璃效果
前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- css透明度、毛玻璃效果
透明度: 1.opacity 背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明 代码: .info{ backgr ...
- 实现一个成熟的底层毛玻璃效果(纯CSS)
写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...
- css实现毛玻璃效果
css实现毛玻璃效果,效果图 1,html代码 <div class="mainHolder"> <div class="textHolder" ...
随机推荐
- python多进程、多线程服务器和客户端的简单实现
使用了多进程的服务器: from SocketServer import TCPServer, ForkingMixIn, ThreadingMixIn, StreamRequestHandler c ...
- CRM是什么意思,有哪些作用?
我们总会听到一些人提到CRM或CRM系统,但是通常不知道它的含义,所以今天小Z就来详细介绍一下CRM. GartnerGroup1993年首次提出了这一概念:所谓的客户关系管理就是为企业提供一个全面的 ...
- 【Azure 云服务】Azure Cloud Service 创建 Alert 指南 [基于旧版 Alert(Classic)不可用情况下]
问题描述 在Azure云服务(Cloud Service)创建Alert(Classic)时候遇见失败消息:"Failed to update alert testclassicalertr ...
- 【例 3】 修改 bols 文件的 atime 和 mtime。 [root@localhost ~]# touch -d "2017-05-04 15:44" bols
Linux touch命令:创建文件及修改文件时间戳 < Linux删除空目录(rmdir命令)Linux在文件之间建立软/硬链接(ln命令) > <Linux就该这么学>是一 ...
- g77介绍 g77 是 Fortran77 的编译器。它对 Fortran 77 标准提供完备的支持,并支持 Fortran 90 和 95 的部分特性。 由于 Fortran 77 标准在数值计算中的影响力,g77 可能是应用最广的Fortran编译器。 在 GCC 4.0 之前,g77 是 GCC 的一部分,但现在,g77 已经停止开发。
GFORTRAN 维基百科,自由的百科全书 跳到导航 跳到搜索 此条目需要扩充. (2018年11月2日)请协助改善这篇条目,更进一步的信息可能会在讨论页或扩充请求中找到.请在扩充条目后将此模 ...
- 011.Kubernetes使用共享存储持久化数据
本次实验是以前面的实验为基础,使用的是模拟使用kubernetes集群部署一个企业版的wordpress为实例进行研究学习,主要的过程如下: 1.mysql deployment部署, wordpre ...
- JavaEE 学大数据是否掌握 JavaSE 和 Linux 就够了?
引言 如果你是学习大数据的童靴,可能经常在网上看到一些公众号或博客告诉你,学习大数据基础部分只需要掌握 JavaSE 和 Linux 就够了,至于 JavaWeb 和 JavaEE 简单了解一下就可以 ...
- 一次线上事故,让我对MySql的时间戳存char(10)还是int(10)有了全新的认识
美好的周五 周五的早晨,一切都是那么美好. 然鹅,10点多的时候,运营小哥哥突然告诉我后台打不开了,我怀着一颗"有什么大不了的,估计又是(S)(B)不会连wifi"的心情,自信的打 ...
- 我的Python书被台湾的出版社引进版权了,书的名字也更吸引人了
我去年出了一本Python书,基于股票大数据分析的Python入门实战,在这本书里,我是用股票范例讲述Pythorn的爬虫,数据分析和机器学习知识点,如下是京东的连接. https://item.jd ...
- 离散傅里叶变换的衍生,负频率、fftshift、实信号、共轭对称
封面是福州的福道,从高处往下看福道上的人在转圈圈.从傅里叶变换后的频域角度来看,我们的生活也是一直在转圈圈,转圈圈也是好事,说明生活有规律,而我们应该思考的是,如何更有效率地转圈圈--哦别误会,我真不 ...