如何仅使用 CSS 在覆盖层中创建一个洞以显示其下方的内容？

CSS中的遮罩层洞

在网站上创建遮罩层并保留底层内容的可见性，是一种常见的需求。本文将探讨如何通过纯 CSS 来实现这种效果。

问题

如何在遮罩层中创建一个洞，以便用户可以透过遮罩层看到底层网站的内容？

CSS 解决方案

使用 box-shadow 属性可以在遮罩层中创建洞。该属性允许在元素周围创建阴影，扩散非常大的阴影可以创建一个实质上透明的区域。

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

如上所示，我们将扩展半径设置为非常大的值 (9999px)。这将创建一个几乎覆盖整个遮罩层的阴影，同时保留遮罩层中央的透明区域。

代码示例

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

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

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

结论

通过使用 box-shadow 属性，我们成功地在遮罩层中创建了一个洞。这种技巧为开发人员提供了在保持底层内容可见性的同时创建遮罩层的灵活性，扩展了 CSS 的可能性。

以上是如何仅使用 CSS 在覆盖层中创建一个洞以显示其下方的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！