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

元素後方模糊和色彩偏移。

Adam Argyle
Joe Medley
Joe Medley
GitHub
半透明、模糊處理和其他效果都是建立深度，同時保留背景內容內容的實用方式。並支援許多用途，例如冰霜玻璃、影片重疊元素、半透明的導覽標頭、不當的影像遮蔽、圖片載入等。您可能會在兩個熱門作業系統中看到這些效果：Windows 10 和 iOS。

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

過去，這些技巧很難在網頁上實作，需要使用不太完美的駭客或解決方法。近年來，Safari 和 Edge 都透過 background-filter (以及 -webkit-backdrop-filter) 屬性提供這些功能。該屬性會根據篩選函式，動態混合前景和背景色彩。自 76 版起，Chrome 已支援 background-filter。

示範 backdrop-filter 篩選函式的範例。試試 CodePen 上的範例。

瀏覽器支援

瀏覽器支援

  • Chrome：76。
  • Edge：79。
  • Firefox：103。
  • Safari：18 歲。

資料來源

基於效能考量，如果不支援 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 以外的任何內容，瀏覽器會建立新的堆疊內容。只有在元素具有絕對和固定位置子系的情況下，才可建立包含區塊。

你可以合併濾鏡，打造豐富巧妙的效果，或只使用一個濾鏡，即可產生更細微或精確的效果。甚至可以與 SVG 濾鏡搭配使用。

範例

先前僅供作業系統使用的設計技巧和樣式，現在只要透過單一 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;
}
請試試 Chen Hui Jing 在 Codrops 中的這個範例。

結論

過去幾年，超過 560 位使用者為 Chromium 錯誤按讚，清楚標示這是 CSS 功能的久候項目。Chrome 在 76 版中發布的 backdrop-filter，讓網路更接近真正的 OS 類 UI 呈現方式。

其他資源