如何在网站中实现带透明高亮区域的教程遮罩层功能？

阿华AIGC实验室

2026-5-27

实现教程引导的高亮遮罩区域

嘿，我懂你想要做的是教程里的聚焦高亮遮罩——全屏深色半透明遮罩，只保留一块完全透明的区域，让用户能清晰看到教程指向的内容对吧？你现在遇到的问题核心是：子div的透明背景是叠加在父元素的半透明背景之上的，所以哪怕子div设了rgba(0,0,0,0)，看起来还是父元素的灰色，没法透出下方的内容。

下面给你两种实用的解决方案，都能完美实现你要的效果：

方法一：使用CSS `mask` 属性（推荐，现代浏览器支持良好）

这个方法直接利用CSS遮罩功能，定义遮罩的形状和透明区域，代码简洁直观：

修改后的HTML

<body>
  <div class="content">
    <p>THIS IS CONTENT</p>
    <button id="target-btn">点击我！</button> <!-- 示例目标元素 -->
  </div>
  <div class="overlay"></div>
</body>

对应的CSS

.content {
  padding: 2rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 深色半透明遮罩 */
  z-index: 9999;
  /* 这里定义遮罩：中间透明，其余区域显示背景 */
  mask: radial-gradient(
    circle 100px at 200px 150px, /* 透明区域的形状、大小、位置 */
    transparent 100%,
    black 101%
  );
  /* 兼容webkit内核浏览器 */
  -webkit-mask: radial-gradient(
    circle 100px at 200px 150px,
    transparent 100%,
    black 101%
  );
}

原理说明：

mask 属性让遮罩层只有指定区域是透明的，其余区域显示深色背景。
你可以根据需要修改radial-gradient的参数：比如改成rectangle做矩形透明区，调整at后面的坐标定位到你的目标元素位置，修改尺寸适配元素大小。

方法二：利用 `box-shadow` 模拟遮罩

如果需要兼容更老的浏览器，可以用这个思路：让遮罩容器本身透明，然后给内部的子元素加一个超大的阴影，覆盖全屏，中间空出的区域就是透明的：

修改后的HTML

<body>
  <div class="content">
    <p>THIS IS CONTENT</p>
    <button id="target-btn">点击我！</button>
  </div>
  <div class="overlay">
    <div class="highlight-area"></div>
  </div>
</body>

对应的CSS

.content {
  padding: 2rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none; /* 允许点击穿透到下方内容 */
}

.highlight-area {
  position: absolute;
  top: 120px; /* 目标元素的顶部位置 */
  left: 180px; /* 目标元素的左侧位置 */
  width: 120px; /* 目标元素的宽度 */
  height: 40px; /* 目标元素的高度 */
  /* 超大阴影覆盖全屏，模拟深色遮罩 */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  border-radius: 4px; /* 可选：给透明区域加圆角 */
}

原理说明：

遮罩容器overlay本身是透明的，子元素highlight-area的box-shadow足够大（9999px），可以覆盖整个屏幕，这样中间的highlight-area区域就会透出下方的内容，周围则是深色阴影。
加上pointer-events: none可以让用户点击透明区域时，事件穿透到下方的目标元素上，更符合教程引导的交互逻辑。

你可以根据自己的需求和浏览器兼容要求选择其中一种方法，两种都能解决你当前子div透明无效的问题~

内容的提问来源于stack exchange，提问作者Marcel Angir