元素後方模糊和色彩偏移。
半透明、模糊處理和其他效果都是建立深度,同時保留背景內容內容的實用方式。並支援許多用途,例如冰霜玻璃、影片重疊元素、半透明的導覽標頭、不當的影像遮蔽、圖片載入等。您可能會在兩個熱門作業系統中看到這些效果:Windows 10 和 iOS。
過去,這些技巧很難在網頁上實作,需要使用不太完美的駭客或解決方法。近年來,Safari 和 Edge 都透過 background-filter
(以及 -webkit-backdrop-filter
) 屬性提供這些功能。該屬性會根據篩選函式,動態混合前景和背景色彩。自 76 版起,Chrome 已支援 background-filter
。
瀏覽器支援
基於效能考量,如果不支援 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);
}
多個篩選器
有時,你可能需要使用多個濾鏡才能達到理想效果。做法是提供以空格分隔的篩選器清單。例如:
.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
,讓網路更接近真正的 OS 類 UI 呈現方式。