如何在 CSS 覆蓋層中建立透明孔？

在 CSS 覆蓋層中建立一個洞

只使用 CSS 就可以在覆蓋層中建立一個洞以顯示底層網站元素。一種有效的技術是利用具有大擴散半徑的盒子陰影屬性。

要達到此效果：

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

此盒陰影建立一個帶有小藍色的大透明正方形邊界。它有效地在覆蓋層上創建了一個洞，讓您可以看到底層內容。 9999px 的擴散半徑可確保孔洞覆蓋整個覆蓋區域。

範例 HTML：

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

<div class="hole"></div>

此 CSS 程式碼和 HTML 範例示範如何使用在覆蓋層中建立透明孔僅CSS，使您能夠看到下面的網站元素。

以上是如何在 CSS 覆蓋層中建立透明孔？的詳細內容。更多資訊請關注PHP中文網其他相關文章！