css+js设置全浏览器兼容针对火狐浏览器毛玻璃效果教程

在写秋知德雨主题就遇到了这个问题，本来就一句css语句就可以解决的毛玻璃问题但是在火狐浏览器就不能用，火狐浏览器至今都没有兼容-backdrop-filter，这就让人非常老火，不知道这x浏览器什么疯，本来挺好感的，现在好感全无。

火狐浏览器效果图

什么是backdrop-filter：为了给元素后的内容添加滤镜而不影响元素本身而诞生的。使用它可以非常方便的实现磨砂玻璃效果（毛玻璃）！

下面这种方法就非常巧妙了，正常而言，运用毛玻璃效果的背景元素，都不是一张图片那么简单！背后通常都是整个页面复杂的结构，多层 DOM 的嵌套。

那么通过叠加一张简单的图片，就无法奏效了，我们得想办法模拟整个 DOM 元素。

而恰好，在 Firefox 中，有这么一个属性 -- -moz-element()。

何为-moz-element()？MDNz-element的解释是，CSS 函数element() 定义了一个从任意的 HTML 元素中生成的图像 <image> 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，应用了该属性的元素的背景也会相应更改。

-moz-element() 如何使用

1.它能够复制一个元素内部渲染出来的 UI，并且能够实时同步变化。

2.完整语句是这样的： background: -moz-element(#这里是ID);注意：只能是下级元素的ID不能越级。

3.使用方法就是在导航栏上面新建一个div， 比如： <div class="g-glossy-firefox" id="sadaasasda"></div>，给他-moz-element()属性，就可以传递实时渲染的UI图片.

4.完整css语句（这句是给除火狐外的其他浏览器的直接就有不影响内容的毛玻璃效果）。

 .g-glossy {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

5.兼容火狐浏览器的css语句

//这句是裁切溢出的图片
 .g-glossy-firefox{overflow:hidden;}
//默认隐藏
.g-glossy-firefox {display:none;}
//当检测-moz-element不能被浏览器兼容时执行，下面的语句。
@supports (background: -moz-element(#mbl-element)) {
        .g-glossy-firefox {
            display:block;
 position: fixed;
        width: 100%;
        height: 60px;
        background: -moz-element(#这里就是传递进来的渲染ui);
        filter: blur(10px);
      z-index: 999;
      }
}

那么下面问题来了渲染的ui不能跟随鼠标滚动而滚动，现在就用js来解决这个问题。
6.js让g-glossy-firefox内部的背景元素跟随滚动。

$(function() {
        let blur = $('.g-glossy-firefox')[0].style;
        let offset = $('.layui-header').eq(0).offset();

        function updateBlur() {
            blur.backgroundPosition = 
                `${-window.scrollX - offset.left}px ` + 
                `${-window.scrollY - offset.top}px`;
        }
        document.addEventListener('scroll', updateBlur, false), updateBlur();
});

7.完整代码：

 
//html
<div class="g-glossy-firefox" id="sadaasasda"></div>
//html
//css页面代码
.g-element-copy { 
margin: auto; 
width: 100%; 
height: 60px;
 position: absolute; 
z-index: 999; 
background-color: rgba(255, 255, 255, 0.5); 
backdrop-filter: blur(10px); } 
.g-glossy-firefox{overflow:hidden;} 
.g-glossy-firefox {display:none;} 
@supports (background: -moz-element(#mbl-element)) {
 .g-glossy-firefox { 
display:block; 
position: fixed;
 width: 100%; 
height: 60px; 
background: -moz-element(#mbl-element);
 filter: blur(10px); z-index: 999; 
} } 
//css页面代码
//js页面代码
$(function() {
        let blur = $('.g-glossy-firefox')[0].style;
        let offset = $('.layui-header').eq(0).offset();

        function updateBlur() {
            blur.backgroundPosition = 
                `${-window.scrollX - offset.left}px ` + 
                `${-window.scrollY - offset.top}px`;
        }
        document.addEventListener('scroll', updateBlur, false), updateBlur();
});

//js页面代码