上述效果已经非常接近了，硬要挑刺的话，就是应用了模糊滤镜的伪元素的边缘有白边瑕疵，这一点其实是滤镜本身的问题，也非常好解决，我们只需要将伪元素的范围扩大一点即可：
.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> <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></div>，在这个元素内模拟 #bg 内的内容：
<div> <p>Content</p> </div> <div></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> <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>frosted glass effect </div> <div></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 不会展示