[[409425]]

通過(guò)本文，你能了解到

1. 最基本的使用 CSS backdrop-filter 實(shí)現(xiàn)磨砂玻璃(毛玻璃)的效果
2. 在至今不兼容 backdrop-filter 的 firefox 瀏覽器，如何利用一些技巧性的操作，巧妙的同樣實(shí)現(xiàn)毛玻璃效果，讓這個(gè)效果真正能運(yùn)用在業(yè)務(wù)當(dāng)中

什么是 backdrop-filter

backdrop-filter CSS 屬性可以讓你為一個(gè)元素后面區(qū)域添加圖形效果(如模糊或顏色偏移)。因?yàn)樗m用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

backdrop-filter 與 filter 非常類(lèi)似，可以取的值都是一樣的，但是一個(gè)是作用于整個(gè)元素，一個(gè)是只作用于元素后面的區(qū)域。

backdrop-filter 與 filter 對(duì)比

我們使用 backdrop-filter 與 filter 同時(shí)實(shí)現(xiàn)一個(gè)毛玻璃效果作為對(duì)比，偽代碼如下：

<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 對(duì)比[1]

在 backdrop-filter 之前，想實(shí)現(xiàn)上述的只給元素背景添加濾鏡效果還是非常困難的，并且，對(duì)于靜態(tài)畫(huà)面還好，如果背景還是可以滾動(dòng)的動(dòng)態(tài)背景，通常 CSS 是無(wú)能為力的。

backdrop-filter 正是為了給元素后的內(nèi)容添加濾鏡而不影響元素本身而誕生的。使用它可以非常方便的實(shí)現(xiàn)磨砂玻璃效果(毛玻璃)!

backdrop-filter 的兼容性

backdrop-filter 其實(shí)已經(jīng)誕生挺久了，然而，firefox 至今都不兼容它!

對(duì)于部分已經(jīng)放棄了 IE 的 PC 端業(yè)務(wù)而言，firefox 還是需要兼容的，想要讓使用 backdrop-filter 實(shí)現(xiàn)毛玻璃效果應(yīng)用落地，firefox 的兼容問(wèn)題必須得解決。

在 firefox 中實(shí)現(xiàn)毛玻璃效果

OK，本文的重點(diǎn)就是在于如何在 firefox 中，不使用 backdrop-filter 而盡可能的還原毛玻璃的效果。

首先看一下，如果是正常使用 backdrop-filter，還是上述的例子效果如下，是沒(méi)有毛玻璃效果的：

使用 background-attachment: fixed 兼容靜態(tài)背景圖

如果在 firefox 上想使用毛玻璃效果。應(yīng)用毛玻璃元素的背景只是一張靜態(tài)背景圖，其實(shí)方法是有很多的。

我們只需在元素的背后，疊加一張同樣的圖片，利用 background-attachment: fixed 將疊加在元素下面的圖片定位到與背景相同的坐標(biāo)，再使用 filter: blur() 對(duì)其進(jìn)行模糊處理即可。

偽代碼如下：

<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; 
    } 
} 

效果如下：

此方法也是在沒(méi)有 backdrop-filter 之前，在各個(gè)瀏覽器想實(shí)現(xiàn)簡(jiǎn)單毛玻璃效果最常用的方法之一。

CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 實(shí)現(xiàn)毛玻璃效果[2]

使用 background-attachment: fixed 兼容靜態(tài)背景圖的缺點(diǎn)

不過(guò)這種方法也有兩個(gè)缺點(diǎn)：

1.由于使用了偽元素疊加了一層背景，因?yàn)閷蛹?jí)關(guān)系，父元素的 background 是在最下層的，所以元素本身的背景色其實(shí)并沒(méi)有被充分體現(xiàn)，可以對(duì)比下兩種方法的實(shí)際效果圖：

解決方案是再通過(guò)另外一個(gè)偽元素再疊加一層背景色，這個(gè)背景色應(yīng)該是原本賦值給父元素本身的。

疊加之后的效果如下：

CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 實(shí)現(xiàn)毛玻璃效果優(yōu)化[3]

2.上述效果已經(jīng)非常接近了，硬要挑刺的話，就是應(yīng)用了模糊濾鏡的偽元素的邊緣有白邊瑕疵，這一點(diǎn)其實(shí)是濾鏡本身的問(wèn)題，也非常好解決，我們只需要將偽元素的范圍擴(kuò)大一點(diǎn)即可：

.g-glossy { 
    overflow: hidden; 
    .... 
    &::before { 
        content: ""; 
        position: absolute; 
        top: -100px; 
        left: -100px; 
        right: -100px; 
        bottom: -100px; 
    } 
} 

定位的代碼由 top: 0px; 改為 top: -100px，四個(gè)方位都是如此即可。如此一來(lái)，就能做到基本上是百分百的模擬。

使用 moz-element() 配合 filter: blur() 實(shí)現(xiàn)復(fù)雜背景毛玻璃效果

下面這種方法就非常巧妙了，正常而言，運(yùn)用毛玻璃效果的背景元素，都不是一張圖片那么簡(jiǎn)單!背后通常都是整個(gè)頁(yè)面復(fù)雜的結(jié)構(gòu)，多層 DOM 的嵌套。

那么通過(guò)疊加一張簡(jiǎn)單的圖片，就無(wú)法奏效了，我們得想辦法模擬整個(gè) DOM 元素。

而恰好，在 Firefox 中，有這么一個(gè)屬性 -- -moz-element()。

何為 -moz-element()?[MDN-element](https://developer.mozilla.org/en-US/docs/Web/CSS/element( "MDN-element")) 的解釋是，CSS 函數(shù) element() 定義了一個(gè)從任意的 HTML 元素中生成的圖像<image> 值。該圖像值是實(shí)時(shí)的，這意味著如果被指定的 HTML 元素被更改，應(yīng)用了該屬性的元素的背景也會(huì)相應(yīng)更改。

它其實(shí)是個(gè)草案規(guī)范，但是一直以來(lái)，只有 Firefox 支持它 -- CAN I USE -- CSS element()[4]：

它有什么作用呢?

-moz-element() 如何使用

那么 -moz-element() 如何使用呢?簡(jiǎn)而言之，它能夠復(fù)制一個(gè)元素內(nèi)部渲染出來(lái)的 UI，并且能夠?qū)崟r(shí)同步變化。

假設(shè)我們有這樣一個(gè)簡(jiǎn)單的結(jié)構(gòu)，元素背景和內(nèi)容都在運(yùn)動(dòng)：

<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); 
    } 
} 

它的效果大概是這樣：

我們就假設(shè)這個(gè)結(jié)構(gòu)就是我們頁(yè)面某一塊的內(nèi)容，然后，我們就可以使用 background: -moz-element(#id) 這種方式，將這個(gè)元素內(nèi)繪制的 UI 內(nèi)容完全拷貝至另外一個(gè)元素，看看效果。

我們添加一個(gè)元素<div class="g-element-copy"></div>，在這個(gè)元素內(nèi)模擬 #bg 內(nèi)的內(nèi)容：

<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); 
} 

它可以完全復(fù)制另外一個(gè)元素內(nèi)繪制出來(lái)的 UI，并且能追蹤實(shí)時(shí)變化：

CodePen Demo -- -moz-element Demo(Firefox Only)[5]

在 firefox 中使用 element 復(fù)制 UI，用作毛玻璃元素背景

這樣，有了上面的鋪墊，下面的內(nèi)容就比較好理解了。

和上述的 background-attachment: fixed 方案對(duì)比，我們還是通過(guò)偽元素疊加一層背景，只不過(guò)背景內(nèi)的內(nèi)容由單純一張圖片，變成了由 -moz-element() 復(fù)制的整段 UI 內(nèi)容。

其次，上面的方案我們使用 background-attachment: fixed 使背景圖和偽元素內(nèi)疊加的圖片的位置對(duì)齊，在這里，我們需要借助 Javascript 進(jìn)行簡(jiǎn)單的運(yùn)算，確定背景內(nèi)容元素的相關(guān)位置，計(jì)算對(duì)齊量。

來(lái)看這樣一個(gè) DEMO：

<div id="bg" class="bg"> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
    <div>模擬真實(shí) DOM</div> 
</div> 
<div class="g-glossy">frosted glass effect </div> 
<div class="g-glossy-firefox"></div> 

其中，.g-glossy 是在正常情況下 backdrop-filter 兼容時(shí)，我們的毛玻璃元素，而 .g-glossy-firefox 則是不兼容 backdrop-filter 時(shí)，我們需要模擬整個(gè) DOM 背景 UI時(shí)候的元素，可以通過(guò) CSS 特性檢測(cè) CSS @support 進(jìn)行控制：

核心 CSS 代碼：

.bg { 
    // 整個(gè)頁(yè)面的 DOM 結(jié)構(gòu) 
} 
 
.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); 
    } 
} 

簡(jiǎn)單解讀一下：

1. 對(duì)于兼容 backdrop-filter 的，.g-glossy 內(nèi)的代碼將直接生效，并且 .g-glossy-firefox 不會(huì)展示
2. 對(duì)于 Firefox 瀏覽器，因?yàn)?backdrop-filter 必然不兼容，所以 .g-glossy 內(nèi)的 backdrop-filter: blur(10px) 不會(huì)生效，而 @supports (background: -moz-element(#bg)) 內(nèi)的樣式會(huì)生效，此時(shí) .g-glossy-firefox 將會(huì)利用 background: -moz-element(#bg) no-repeat; 模擬 id 為 bg 的元素

當(dāng)然，這里我們需要借助一定的 JavaScript 代碼，計(jì)算我們的模擬頁(yè)面 UI 的元素 .g-glossy-firefox 相對(duì)它模擬的 #bg 元素，也就是頁(yè)面布局的一個(gè)定位偏差：

$(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 上也實(shí)現(xiàn)毛玻璃的效果了：

它相對(duì)于上面的第一種方案而言，最大的不同之處在于，它可以模擬各式各樣的背景元素，背景元素可以不僅僅只是一張圖片!它可以是各種復(fù)雜的結(jié)構(gòu)!

這種方案是我的 CSS 群中，風(fēng)海流 同學(xué)提供的一種思路，非常的巧妙，并且，他自己也對(duì)這種方案進(jìn)行了完整的闡述，你可以戳這里看看：在網(wǎng)頁(yè)中實(shí)現(xiàn)標(biāo)題欄「毛玻璃」效果[6]，本文也是經(jīng)過(guò)他的同意，重新整理發(fā)出。

上述效果的完整代碼，你可以戳這里：

CodePen Demo -- 兼容 Firefox 的復(fù)雜背景毛玻璃(磨砂玻璃)效果[7]

總結(jié)一下

簡(jiǎn)單對(duì)上述內(nèi)容進(jìn)行一個(gè)總結(jié)：

• 你可以使用 backdrop-filter 對(duì)兼容它的瀏覽器非常簡(jiǎn)單的實(shí)現(xiàn)毛玻璃(磨砂玻璃)效果
• 對(duì)于不兼容 backdrop-filter 的瀏覽器，如果它只是簡(jiǎn)單背景，可以使用 background-attachment: fixed 配合 filter: blur() 進(jìn)行模擬
• 對(duì)于 firefox 瀏覽器，你還可以使用 moz-element() 配合 filter: blur() 實(shí)現(xiàn)復(fù)雜背景毛玻璃效果
• 對(duì)于不兼容的上述 3 種效果的其他瀏覽器，設(shè)置了毛玻璃效果的元素，可以通過(guò)設(shè)置類(lèi)似 background: rgba(255, 255, 255, 0.5) 的樣式，使之回退到半透明效果，也算一種非常合理的降級(jí)效果，不會(huì)引起 Bug

參考資料

[1]CodePen Demo -- filter 與 backdrop-filter 對(duì)比: https://codepen.io/Chokcoco/pen/WNjebrr

[2]CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 實(shí)現(xiàn)毛玻璃效果:

https://codepen.io/Chokcoco/pen/XWRrVma

[3]CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 實(shí)現(xiàn)毛玻璃效果優(yōu)化:

https://codepen.io/Chokcoco/pen/abWbzKG

[4]CAN I USE -- CSS element():

https://caniuse.com/css-element-function

[5]CodePen Demo -- -moz-element Demo(Firefox Only):

https://codepen.io/Chokcoco/pen/jOmOPPL

[6]在網(wǎng)頁(yè)中實(shí)現(xiàn)標(biāo)題欄「毛玻璃」效果:

https://chaoli.club/index.php/5347

[7]CodePen Demo -- 兼容 Firefox 的復(fù)雜背景毛玻璃(磨砂玻璃)效果:

https://codepen.io/Chokcoco/pen/ExWqaQG[8]Github -- iCSS: https://github.com/chokcoco/iCSS

本文轉(zhuǎn)載自微信公眾號(hào)「iCSS前端趣聞」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系iCSS前端趣聞公眾號(hào)。