能否使用多个DIV与CSS实现背景图片指定区域高亮的聚光效果？

你之前遇到的外阴影互相遮盖问题，是因为两个元素的阴影层级互相覆盖导致，以下是两种可直接落地的实现方案：

方案1：使用CSS mask实现遮罩挖空（兼容性好，无重叠冲突） #

核心思路是给背景容器加一个全局变暗的遮罩层，再在遮罩层上把两个亮区对应的位置挖空，透出底下的原图，无论多少个亮区都不会出现遮盖问题。

<div class="background-image">
    <div class="light-area-1"></div>
    <div class="light-area-2"></div>
</div>

.background-image {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 替换为你的背景图地址 */
  background: url("xxx.jpg") center/cover no-repeat;
}
/* 用伪元素做全局变暗遮罩 */
.background-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 最后一位0.7是调暗程度，数值越高越暗 */
  background: rgba(0,0,0,0.7);
  /* 以下mask参数对应两个亮区的位置、大小，和下方light-area的样式保持一致即可 */
  -webkit-mask-image: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-size: 
    200px 300px, /* 第一个亮区宽高 */
    150px 150px; /* 第二个亮区宽高 */
  -webkit-mask-position: 
    100px 100px, /* 第一个亮区坐标 */
    400px 200px; /* 第二个亮区坐标 */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  mask-size: 
    200px 300px,
    150px 150px;
  mask-position: 
    100px 100px,
    400px 200px;
  mask-repeat: no-repeat;
  mask-composite: exclude;
  pointer-events: none; /* 不遮挡下方元素的交互事件 */
}
.light-area-1 {
  position: absolute;
  width: 200px;
  height: 300px;
  left: 100px;
  top: 100px;
  /* 可按需加边框、内容等样式，不影响聚光灯效果 */
  border: 2px solid #fff;
}
.light-area-2 {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 400px;
  top: 200px;
  border: 2px solid #fff;
}

方案2：使用超大扩散半径box-shadow（写法极简） #

如果你的亮区是矩形且间距较远，可直接用超大扩散半径的外阴影实现，无需额外写遮罩逻辑：

.background-image {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("xxx.jpg") center/cover no-repeat;
  overflow: hidden; /* 剪掉超出容器的阴影部分 */
}
.light-area-1, .light-area-2 {
  position: absolute;
  z-index: 2;
  /* 扩散半径设为9999px确保覆盖整个容器，最后一位为调暗透明度 */
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.7);
}
.light-area-1 {
  width: 200px;
  height: 300px;
  left: 100px;
  top: 100px;
}
.light-area-2 {
  width: 150px;
  height: 150px;
  left: 400px;
  top: 200px;
}

注意该方案如果两个亮区距离较近，阴影重叠区域会比其他区域更暗，存在重叠亮区需求优先选方案1。

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