CSS奇思妙想-完全兼容磨砂玻璃效果

时间：2023-03-20 21:00:51 科技观察

通过本文，您可以学习如何使用CSSbackdrop-filter在目前不兼容backdrop-filter的firefox浏览器中实现磨砂玻璃（frostedglass）的效果使用一些技巧性的操作，也可以巧妙的实现磨砂玻璃效果，让这种效果真正的用在商业上。什么是backdrop-filterbackground-filterCSS属性允许您向元素后面的区域添加图形效果（例如模糊或颜色偏移）。因为它适用于元素后面的所有元素，所以元素或其背景必须至少部分透明才能看到效果。backdrop-filter和filter很相似，可以取的值都是一样的，只不过一个是作用于整个元素，一个是只作用于元素后面的区域。backdrop-filter和filter的比较我们使用backdrop-filter和filter同时实现毛玻璃效果作为对比，伪代码如下：

Normal

过滤器

背景过滤器

.bg{background:url(image.png);&>div{宽度:300px;高度:200px;background:rgba(255,255,255,.7);}.g-filter{filter:blur(6px);}.g-backdrop-filter{backdrop-filter:blur(6px);}}CodePenDemo--滤镜和背景-滤镜对比[1]在backdrop-filter之前，仅仅在元素背景上实现上述滤镜效果还是非常困难的，而且，对于静态图片，如果背景还是动态背景可以滚动，通常是CSS是无能为力。backdrop-filter的诞生是为了在不影响元素本身的情况下，对元素后面的内容添加过滤器。用它来实现磨砂玻璃（磨砂玻璃）的效果非常方便！background-filter的兼容性backdrop-filter诞生很久了，但是firefox至今不兼容！对于一些已经放弃IE的PC端业务来说，firefox还是要兼容的。如果要使用backdrop-filter实现毛玻璃效果的应用，必须要解决firefox的兼容问题。在firefox中实现毛玻璃效果就OK了。本文的重点是如何在不使用backdrop-filter的情况下，在firefox中尽可能的还原毛玻璃效果。首先，如果你正常使用backdrop-filter，或者上面例子的效果如下，没有毛玻璃效果：使用background-attachment:fixed兼容静态背景图片如果你想使用毛玻璃对火狐的影响。应用磨砂玻璃元素的背景只是一个静态的背景图片，但是有很多方法可以做到。我们只需要在元素后面叠加相同的图片，使用background-attachment:fixed将叠加在元素下方的图片定位到与背景相同的坐标处，然后使用filter:blur()对其进行模糊处理即可。伪代码如下：:100vh;display:flex;background-image:url($img);background-repeat:no-repeat;background-attachment:fixed;background-size:cover;}.g-glossy{position:relative;width:600px;高度:300px;背景色:rgba(255,255,255,0.5);溢出:隐藏;z-index:10;&::before{content:"";position:absolute;top:0;left:0;right:0;底部：0；背景图像：url（$img）；背景重复：不重复；背景附件：固定；背景大小：覆盖；过滤器：模糊（10px）；z-index：-1；}}效果如下：这种方法也是在没有backdrop-filter之前在各种浏览器中实现简单毛玻璃效果最常用的方法之一。CodePen演示——使用后台附件：已修复|filter:bulr()实现毛玻璃效果[2]使用background-attachment:fixed兼容静态背景图的缺点。但是这种方法也有两个缺点：1.由于使用了伪元素，叠加了一层背景。因为层级关系，父元素的背景在底部，所以元素本身的背景色并没有完全体现出来。可以对比一下下面两种方法的实际效果图：解决方法是通过另一个伪元素叠加一层背景色，本来应该给父元素自己赋值的。叠加效果如下：CodePenDemo--usebackground-attachment:fixed|filter:bulr()优化毛玻璃效果[3]2.上面的效果很接近，如果要批评的话，就是应用了blurfilter伪元素的边缘有白色的瑕疵。这其实是过滤器本身的问题，也很容易解决。我们只需要稍微扩大伪元素的范围：.g-glossy{overflow:hidden;....&::before{content:"";position:absolute;top:-100px;left:-100px;right:-100px;bottom:-100px;}}定位代码改为top:0px;totop:-100px，所有四个方向都是一样的。这样基本上可以达到100%的仿真。使用moz-element()withfilter:blur()实现复杂背景毛玻璃效果下面这个方法很巧妙。一般来说，使用磨砂玻璃效果的背景元素并不像图片那么简单！通常整个Page背后结构复杂，多层DOM嵌套。那么通过叠加一个简单的图片，是行不通的，我们得想办法模拟整个DOM元素。而恰好在Firefox中，有这样一个属性——moz-element()。什么是-moz-element()?[MDN-element](https://developer.mozilla.org/zh-CN/docs/Web/CSS/element("MDN-element"))说明CSS函数元素()定义从任意HTML元素生成的图像值。image值为live，这意味着如果指定的HTML元素发生变化，则应用该属性的元素的背景也会随之变化。它实际上是一个规范草案，但到目前为止，只有Firefox支持它--我可以使用--CSSelement()[4]：它有什么作用？-moz-element()如何使用那么-moz-element()如何使用呢？简而言之，它可以复制元素内部呈现的UI，并且可以实时同步更改。假设我们有一个像这样的简单结构，元素背景和动态内容：

Content