CSS：為不可用的背景過濾器提供替代方案

CSS 中的背景過濾器功能在大多數現代瀏覽器中仍然無法訪問。雖然我們預計其未來的支持，但發現替代解決方案勢在必行。

實現類似效果的一種方法是採用具有微妙透明度的背景。下面的 CSS 程式碼示範了這個方法：

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

當不支援背景過濾器時，稍微透明的背景將作為後備。支援背景過濾器的瀏覽器將顯示模糊效果。

下面提供了說明不支援和支援背景過濾器的效果的範例：

[透明後備圖像]
[模糊圖像]

透過採用此策略，即使在缺乏本機背景過濾器功能的瀏覽器中，您也可以在元素上合併視覺上吸引人的過濾器。