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

元素後方的模糊和色彩轉移。

亞當.阿吉爾 (Adam Argyle)
喬梅利
Joe Medley
GitHub
半透明、模糊處理和其他效果有助於建立深度，同時保留背景內容的上下文。這類模型支援各種用途，例如毛玻璃、影片重疊、半透明導覽標題、不當的圖片審查、圖片載入等。您可能在 Windows 10 和 iOS 這兩種熱門作業系統中註意到了這些效果。

毛玻璃特效範例。
霧化玻璃效果示例。來源。

過去，這些技術難以在網站上實作，需要不到完美的秘訣或解決方法。近年來，Safari 和 Edge 都透過 background-filter 和 -webkit-backdrop-filter 屬性提供這些功能，並可根據篩選器函式動態混合前景和背景色彩。Chrome 現已支援 background-filter (自 76 版起)。

示範 backdrop-filter 的篩選函式。在 CodePen 中試用範例。

瀏覽器支援

瀏覽器支援

  • 76
  • 17
  • 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 以外的任何值，瀏覽器會建立新的堆疊結構定義。系統也會在元素具有絕對和固定位置子系的情況下建立包含區塊，

你可以結合多種濾鏡，呈現豐富而巧妙的效果，或是只使用一個濾鏡，取得更細緻或精確的效果。甚至可與 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，讓網站更接近真正具有作業系統的使用者介面呈現方式。

其他資源