本篇文章帶大家了解CSS backdrop-filter屬性，看看該屬性的兼容性，介紹如何實現全兼容毛玻璃效果。
透過本文，你能了解到
#最基本的使用CSS backdrop-filter 實現磨砂玻璃(毛玻璃)的效果
在至今不相容backdrop-filter 的firefox 瀏覽器，如何利用一些技巧性的操作，巧妙的同樣實現毛玻璃效果，讓這個效果真正能運用在業務當中
backdrop-filterbackdrop- 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 對比
#網址：https://codepen.io/Chokcoco/pen/WNjebrr
在backdrop-filter 之前，想實現上述的只給元素背景添加濾鏡效果還是非常困難的，而且，對於靜態畫面還好，如果背景還是可以滾動的動態背景，通常CSS 是無能為力的。
backdrop-filter 正是為了在元素後的內容中添加濾鏡而不影響元素本身而誕生的。使用它可以非常方便的實現磨砂玻璃效果（毛玻璃）！
backdrop-filter 的兼容性backdrop-filter 其實已經誕生挺久了，然而，firefox 至今都不相容它！
對於部分已經放棄了IE 的PC 端業務而言，firefox 還是需要相容的，想要讓使用backdrop-filter 實現毛玻璃效果應用落地，firefox 的兼容問題必須解決。
OK，本文的重點是如何在firefox 中，不使用backdrop-filter 而盡可能的還原毛玻璃的效果。
先來看看，如果是正常使用 backdrop-filter，還是上述的例子效果如下，是沒有毛玻璃效果的：
如果在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() 實現毛玻璃效果
#位址：https://codepen.io/Chokcoco/pen/XWRrVma
不過這種方法也有兩個缺點：
##1、由於使用了偽元素疊加了一層背景，因為層級關係，父元素的background 是在最下層的，所以元素本身的背景色其實並沒有被充分體現，可以對比下兩種方法的實際效果圖：
#
CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 实现毛玻璃效果优化
地址：https://codepen.io/Chokcoco/pen/abWbzKG
2、上述效果已经非常接近了，硬要挑刺的话，就是应用了模糊滤镜的伪元素的边缘有白边瑕疵，这一点其实是滤镜本身的问题，也非常好解决，我们只需要将伪元素的范围扩大一点即可：
.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)
地址：https://codepen.io/Chokcoco/pen/jOmOPPL
这样，有了上面的铺垫，下面的内容就比较好理解了。
和上述的 background-attachment: fixed 方案对比，我们还是通过伪元素叠加一层背景，只不过背景内的内容由单纯一张图片，变成了由 -moz-element() 复制的整段 UI 内容。
其次，上面的方案我们使用 background-attachment: fixed 使背景图和伪元素内叠加的图片的位置对齐，在这里，我们需要借助 Javascript 进行简单的运算，确定背景内容元素的相关位置，计算对齐量。
来看这样一个 DEMO：
<div class="g-glossy">frosted glass effect </div>模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM模拟真实 DOM
其中，.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 的复杂背景毛玻璃（磨砂玻璃）效果
https://codepen.io/Chokcoco/pen/ExWqaQG
简单对上述内容进行一个总结：
backdrop-filter 对兼容它的浏览器非常简单的实现毛玻璃（磨砂玻璃）效果backdrop-filter 的浏览器，如果它只是简单背景，可以使用 background-attachment: fixed 配合 filter: blur() 进行模拟moz-element() 配合 filter: blur() 实现复杂背景毛玻璃效果background: rgba(255, 255, 255, 0.5) 的样式，使之回退到半透明效果，也算一种非常合理的降级效果，不会引起 Bug原文地址：https://segmentfault.com/a/1190000040263452
作者：ChokCoco
更多编程相关知识，请访问：编程视频！！
以上是利用CSS如何達到全相容的毛玻璃效果？ （代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
