使用背景幕濾鏡建立 OS 樣式背景

對元素後方的模糊和顏色位移。

Adam Argyle
Joe Medley
Joe Medley
GitHub
半透明、模糊處理和其他效果可以有效提升畫面深度，同時保留背景內容的脈絡。並支援許多用途，例如冰霜玻璃、影片重疊元素、半透明的導覽標頭、不當的影像遮蔽、圖片載入等。您可能在兩種熱門作業系統中認得這兩個效果：Windows 10 和 iOS。

冰霜玻璃效果的範例。
冰霜玻璃效果的範例。來源。

過去，這些技術難以在網路上實作，而且比不完美的駭客或解決方法。近年來，Safari 和 Edge 都透過 background-filter (以及 -webkit-backdrop-filter) 屬性提供這些功能。該屬性會根據篩選函式，動態混合前景和背景色彩。Chrome 現在從 76 版開始支援 background-filter。

示範 backdrop-filter 篩選函式的功能。試試 CodePen 中的範例。

瀏覽器支援

瀏覽器支援

  • 76
  • 79
  • 103
  • 9

來源

基於效能考量，如果不支援 backdrop-filter，請改回使用圖片，而不是 polyfill。請參考以下範例。

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

基本概念

  • backdrop-filter 屬性會對元素套用一或多個篩選器，進而改變元素背後任何內容的外觀。
  • 重疊元素必須至少部分為透明。
  • 疊加的元素取得新的堆疊內容。

CSS backdrop-filter 會為半透明或透明的元素套用一或多項效果。為瞭解這個情況，請參考以下圖片。

不提供前景透明度
疊加在圓形上的三角形。三角形就無法透過三角形查看。 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
前景透明度
疊加在圓形上的三角形。這個三角形是半透明，能夠讓使用者看到圓圈。 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

左圖顯示未使用或支援 backdrop-filter 時，重疊元素的顯示方式。右圖使用 backdrop-filter 套用模糊效果。請注意，除了 backdrop-filter 以外，也使用 opacity。如果沒有 opacity，就無法套用模糊效果。簡而言之，如果 opacity 設為 1 (完全不透明)，就不會對背景產生任何影響。

backdrop-filter 屬性就像 CSS 篩選器一樣，可支援所有常用的篩選器函式：blur()、brightness()、contrast()、opacity()、drop-shadow() 等。如要使用外部圖片做為篩選條件，以及關鍵字 none、inherit、initial 和 unset，這個外掛程式也支援 url() 函式。MDN 具備這一切相關說明，包括語法、篩選器和值的說明。

如果將 backdrop-filter 設為 none 以外的任何內容，瀏覽器會建立新的堆疊內容。只有在元素具有絕對和固定位置子系的情況下，才可建立包含區塊。

你可以合併濾鏡，打造豐富巧妙的效果，或只使用一個濾鏡，即可產生更細微或精確的效果。甚至可以與可擴充向量圖形篩選器搭配使用。

示例

先前保留給作業系統的設計技術和樣式，現在只要一個 CSS 宣告，就能發揮卓越效能和實現目的。以下舉幾個例子來說明。

單一篩選器

在以下範例中，你可以結合顏色和模糊效果來達到磨砂效果。模糊效果是由 backdrop-filter 提供，而顏色來自元素的半透明背景顏色。

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
在 CodePen 中親自體驗這個範例。

多個篩選器

有時候，您可能需要使用多個濾鏡才能達到想要的效果。做法是提供以空格分隔的篩選器清單。例如：

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

在以下範例中，這四個窗格都有不同的背景濾鏡組合，而同一組形狀的背景都是動畫。

在 CodePen 中親自體驗這個範例。

重疊說明

以下範例說明如何將半透明背景模糊處理，讓文字清晰易讀，並與網頁背景融為一體。

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
歡迎參考這個範例。

動態背景的文字對比度

如先前所述，backdrop-filter 允許在網站上難以或無法執行的高效能。例如根據動畫變更背景。在這個範例中，backdrop-filter 不考量文字背後的意義，仍保持文字與背景之間的高對比。它以預設背景顏色 darkslategray 開頭，並使用 backdrop-filter 反轉轉換後的顏色。

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}
嘗試使用「Codrops」 中的 Chen Hui Jing 範例。

結論

過去幾年來，你有超過 560 人對 Chromium 錯誤表示支持，因此明確標示這是等待一段時間的 CSS 功能。Chrome 76 版推出的 backdrop-filter 版本更接近實際作業系統的 UI 呈現方式。

其他資源