如何仅使用 CSS 在覆盖层中创建一个洞以显示其下方的内容？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-11 00:05:03

原创

748 人浏览过

How can I create a hole in an overlay to reveal the content beneath it using only 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);
}

登录后复制