對元素後方的模糊和顏色位移。
透明度、模糊和其他效果都能有效創造深度,同時保留背景內容。並支援許多用途,例如冰霜玻璃、影片重疊元素、半透明的導覽標頭、不當的影像遮蔽、圖片載入等。您可能在兩種熱門作業系統中認得這兩個效果:Windows 10 和 iOS。
![冰霜玻璃效果的範例。](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=6&hl=zh-tw)
過去,這些技術難以在網路上實作,而且比不完美的駭客或解決方法。近年來,Safari 和 Edge 都透過 background-filter
(以及 -webkit-backdrop-filter
) 屬性提供這些功能。該屬性會根據篩選函式,動態混合前景和背景色彩。Chrome 現在從 76 版開始支援 background-filter
。
backdrop-filter
篩選函式的範例。試試 CodePen 上的範例。
瀏覽器支援
基於效能考量,如果不支援 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
會為半透明或透明的元素套用一或多項效果。為瞭解這個情況,請參考以下圖片。
![疊加在圓形上的三角形。三角形就無法透過三角形查看。](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=6&hl=zh-tw)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![疊加在圓形上的三角形。這個三角形是半透明,能夠讓使用者看到圓圈。](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=6&hl=zh-tw)
.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);
}
多個篩選器
有時候,您可能需要使用多個濾鏡才能達到想要的效果。做法是提供以空格分隔的篩選器清單。例如:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
在以下範例中,這四個窗格都有不同的背景濾鏡組合,而同一組形狀的背景都是動畫。
重疊說明
以下範例說明如何將半透明背景模糊處理,讓文字清晰易讀,並與網頁背景融為一體。
.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;
}
結論
過去幾年來,你有超過 560 人對 Chromium 錯誤表示支持,因此明確標示這是等待一段時間的 CSS 功能。Chrome 76 版推出的 backdrop-filter
版本更接近實際作業系統的 UI 呈現方式。