如何使用 CSS 建立背景模糊效果，即使在較舊的瀏覽器中也是如此？

CSS：Backdrop-Filter Polyfill

Backdrop-filter，一種CSS 功能，可以在元素的背景上實現模糊和其他效果，仍然存在現代瀏覽器基本上不支援。作為替代方案，請考慮使用稍微透明的背景作為後備：

<code class="css">.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

@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);
  }
}</code>

此程式碼為缺乏背景過濾器支援的瀏覽器提供透明後備，同時在支援的瀏覽器中啟用模糊效果。 CSS 還允許將來的 CSS 修訂可能引入無前綴的背景過濾器支援。

視覺化：

[不支援背景濾鏡的透明後備影像] [影像具有背景濾鏡支援的模糊效果]

以上是如何使用 CSS 建立背景模糊效果，即使在較舊的瀏覽器中也是如此？的詳細內容。更多資訊請關注PHP中文網其他相關文章！