CSS 奇思妙想 | 全兼容的毛玻璃效果

時間  2021-07-01
標籤 php css 前端 git github 瀏覽器 函數 佈局 flex 優化 欄目 CSS 简体版
原文   原文鏈接

經過本文，你能瞭解到php

  1. 最基本的使用 CSS backdrop-filter 實現磨砂玻璃(毛玻璃)的效果
  2. 在至今不兼容 backdrop-filter 的 firefox 瀏覽器，如何利用一些技巧性的操做，巧妙的一樣實現毛玻璃效果，讓這個效果然正能運用在業務當中

什麼是 backdrop-filter

backdrop-filter CSS 屬性可讓你爲一個元素後面區域添加圖形效果（如模糊或顏色偏移）。 由於它適用於元素背後的全部元素，爲了看到效果，必須使元素或其背景至少部分透明。css

backdrop-filter 與 filter 很是相似，能夠取的值都是同樣的，可是一個是做用於整個元素，一個是隻做用於元素後面的區域。前端

backdrop-filter 與 filter 對比

咱們使用 backdrop-filter 與 filter 同時實現一個毛玻璃效果做爲對比，僞代碼以下：git

<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 對比github

在 backdrop-filter 以前，想實現上述的只給元素背景添加濾鏡效果仍是很是困難的，而且，對於靜態畫面還好，若是背景仍是能夠滾動的動態背景，一般 CSS 是無能爲力的。瀏覽器

backdrop-filter 正是爲了給元素後的內容添加濾鏡而不影響元素自己而誕生的。使用它能夠很是方便的實現磨砂玻璃效果（毛玻璃）！函數

backdrop-filter 的兼容性

backdrop-filter 其實已經誕生挺久了，然而，firefox 至今都不兼容它！佈局

對於部分已經放棄了 IE 的 PC 端業務而言，firefox 仍是須要兼容的，想要讓使用 backdrop-filter 實現毛玻璃效果應用落地，firefox 的兼容問題必須得解決。flex

在 firefox 中實現毛玻璃效果

OK，本文的重點就是在於如何在 firefox 中，不使用 backdrop-filter 而儘量的還原毛玻璃的效果。優化

首先看一下，若是是正常使用 backdrop-filter，仍是上述的例子效果以下，是沒有毛玻璃效果的：

image

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

效果以下：

image

此方法也是在沒有 backdrop-filter 以前，在各個瀏覽器想實現簡單毛玻璃效果最經常使用的方法之一。

CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 實現毛玻璃效果

使用 background-attachment: fixed 兼容靜態背景圖的缺點

不過這種方法也有兩個缺點：

  1. 因爲使用了僞元素疊加了一層背景，由於層級關係，父元素的 background 是在最下層的，因此元素自己的背景色其實並無被充分體現，能夠對比下兩種方法的實際效果圖：

解決方案是再經過另一個僞元素再疊加一層背景色，這個背景色應該是本來賦值給父元素自己的。

疊加以後的效果以下：

image

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 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程