如何在不依賴「backdrop-filter」的情況下實現玻璃模糊效果？

CSS 難以捉摸的背景過濾器的模糊替代品

儘管CSS 的背景過濾器具有迷人的效果，但它仍然難以捉摸，截至2016 年7月1 日，瀏覽器支援有限。在我們熱切等待其全面實現的同時，讓我們探索一種解決方法，可以讓我們更接近所需的模糊玻璃效果。

透明後備

對於缺乏背景濾鏡支援的瀏覽器，稍微透明背景可以模仿毛玻璃效果。以下程式碼提供了一個簡單的後備：

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

利用瀏覽器支援

對於支援背景過濾器的瀏覽器，我們可以利用其模糊功能。以下是適合此場景的 CSS 程式碼的增強版本：

<code class="css">/* if backdrop support: very transparent and blurred */
@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>

此程式碼可確保在支援的瀏覽器中套用模糊效果，而對於不支援的瀏覽器，透明後備會優雅地降級。

範例：查看模糊效果

如果沒有背景濾鏡支持，元素會顯示出稍微透明的背景，如下圖所示：

[插入影像透明後備效果]

有了背景濾鏡的支持，玻璃模糊效果就出現了，如下圖所示：

[插入模糊效果圖像]

結論

這裡介紹的背景過濾器解決方法提供了一個實用的解決方案，可以在Web 元素上實現模糊的玻璃效果，無論瀏覽器是否支援。雖然我們預計背景濾鏡將來會完全可用，但該技術為增強用戶體驗提供了一種有價值的替代方案。

以上是如何在不依賴「backdrop-filter」的情況下實現玻璃模糊效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！