乐趣区

关于前端:CSS-奇思妙想-全兼容的毛玻璃效果

jiezi

通过本文，你能理解到

  1. 最根本的应用 CSS backdrop-filter 实现磨砂玻璃 (毛玻璃) 的成果
  2. 在至今不兼容 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 兼容动态背景图的毛病

不过这种办法也有两个毛病：

  1. 因为应用了伪元素叠加了一层背景，因为层级关系，父元素的 background 是在最上层的，所以元素自身的背景色其实并没有被充分体现，能够比照下两种办法的理论效果图：

解决方案是再通过另外一个伪元素再叠加一层背景色，这个背景色应该是本来赋值给父元素自身的。

叠加之后的成果如下：

CodePen Demo — 应用 background-attachment: fixed | filter: bulr() 实现毛玻璃成果优化

  1. 上述成果曾经十分靠近了，硬要挑刺的话，就是利用了含糊滤镜的伪元素的边缘有白边瑕疵，这一点其实是滤镜自身的问题，也十分好解决，咱们只须要将伪元素的范畴扩充一点即可：
.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);
    }
}

简略解读一下：

  1. 对于兼容 backdrop-filter 的，.g-glossy 内的代码将间接失效，并且 .g-glossy-firefox 不会展现
  2. 对于 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

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版