如何僅使用 CSS 在覆蓋層中建立一個洞以顯示其下方的內容？

CSS中的遮罩層洞

在網站上建立遮罩層並保留底層內容的可見性，是一種常見的需求。本文將探討如何透過純 CSS 來實現這種效果。

問題

如何在遮罩層中建立一個洞，以便使用者可以透過遮罩層看到底層網站的內容？

CSS 解

使用 box-shadow 屬性可以在遮罩層中建立洞。此屬性允許在元素周圍創建陰影，擴散非常大的陰影可以創建一個實質上透明的區域。

如上所示，我們將擴展半徑設定為非常大的值 (9999px)。這將創建一個幾乎覆蓋整個遮罩層的陰影，同時保留遮罩層中央的透明區域。

程式碼範例

結論

透過使用 box-shadow 屬性，我們成功地在遮罩層中建立了一個洞。這種技巧為開發人員提供了在保持底層內容可見性的同時創建遮罩層的靈活性，擴展了 CSS 的可能性。

以上是如何僅使用 CSS 在覆蓋層中建立一個洞以顯示其下方的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！