如何使用 CSS 建立模糊的半透明疊加層？

將CSS 玻璃/模糊效果塗抹在疊加層

問題：

模糊背景的半透明疊加div，以模糊其後面的元素。然而，目前的 CSS 程式碼（帶有濾鏡效果）無法產生所需的結果。

CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

解：

要達到所需的效果，請考慮使用background- filter CSS屬性。這種方法更簡單，並提供更好的跨瀏覽器支援：

#overlay {
    backdrop-filter: blur(6px);
}

注意：瀏覽器對背景過濾器的支援並不通用，但它應該在大多數現代瀏覽器中工作。在不需要模糊的情況下，這種替代方案可以提供可靠的解決方案。

以上是如何使用 CSS 建立模糊的半透明疊加層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！