如何用CSS创建透明选区并实现页面局部高亮效果？

需求描述 #

我想仅用CSS实现这样的UI效果：网页特定区域高亮显示，其余页面被半透明黑色遮罩覆盖。高亮区域需完全清晰且可交互，其余页面变暗。要求尽量避免JavaScript和复杂HTML结构，支持最新版浏览器。

我尝试过的方案 #

初始遮罩方案 #

一开始我写了覆盖整个视口的遮罩，但无法实现局部高亮：

/* 覆盖整个视口的遮罩 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 半透明黑色 */
}

之后尝试用CSS的mask属性实现选区，但不确定这是否为最佳实践。另外，高亮矩形需要支持交互（移动、缩放）。

优化思路：用box-shadow实现外部变暗 #

后来发现用box-shadow是个可行的方案：

.my-rectangle {
  position: absolute;
  z-index: 10001;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(102, 179, 255, 0.2);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* 矩形外部的变暗背景 */
}

标准实现方案推荐 #

针对这个需求，目前有两种主流且高效的纯CSS方案，完全符合你的要求：

方案一：box-shadow极简方案（优先推荐） #

这是最简洁的实现方式，核心是给高亮元素设置超大范围的扩散阴影，模拟全屏遮罩效果：

• 优点：HTML结构极简，仅需给目标元素加类；支持元素交互（移动、缩放可通过CSS的transform或调整宽高实现）；浏览器兼容性极佳。
• 注意点：需给高亮元素设置足够高的z-index，确保阴影能覆盖其他内容；若页面有滚动，建议设置position: fixed避免遮罩跟随滚动错位。

优化后的代码示例：

.highlight-area {
  position: fixed; /* 固定定位防止滚动错位 */
  z-index: 9999;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(102,179,255,0.15);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  /* 纯CSS实现缩放支持 */
  resize: both;
  overflow: hidden;
}

注：resize: both可让元素支持纯CSS缩放；移动功能可结合CSS变量动态调整top/left值实现。

方案二：CSS mask高级方案（适合复杂形状） #

如果需要圆形、不规则图形等非矩形高亮区域，mask属性是更灵活的选择：

1. 创建全屏遮罩层，通过mask挖空高亮区域：

.mask-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  /* 圆形高亮示例：中间透明区域为高亮区 */
  mask: radial-gradient(circle at 50% 50%, transparent 150px, black 151px);
  /* Safari兼容前缀 */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 150px, black 151px);
}

2. 将需要高亮的元素放在遮罩层上方，确保可交互：

<div class="mask-overlay"></div>
<div class="highlight-content">我是可交互的高亮内容</div>

• 优点：支持任意形状的高亮区域；遮罩层独立，不影响高亮元素原有样式。
• 注意点：mask属性需考虑webkit内核前缀（最新版Chrome/Firefox已支持标准写法，Safari仍需-webkit-mask）；动态调整高亮位置需结合CSS变量修改mask的定位参数。

总结 #

• 仅需矩形高亮时，优先使用box-shadow方案，代码极简、兼容性拉满；
• 需要复杂形状高亮时，选择CSS mask方案，灵活性更强；
• 两种方案均无需JavaScript，仅需简单HTML结构，完全支持最新版浏览器。

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