是否可以让上层div在光标周围区域透明，透出下层div的内容？

方案1：CSS mask + 鼠标位置监听（实现最简单，性能最优） #

• 实现逻辑：上层div使用径向渐变作为mask遮罩，监听鼠标移动事件动态修改mask的位置，鼠标所在位置的径向渐变中心设为透明、其他区域不透明，即可露出下层div的内容。
• 完整代码示例：
  HTML结构：

<div class="container">
  <div class="bottom-layer">下层待显示内容</div>
  <div class="top-layer">上层覆盖内容</div>
</div>

CSS样式：

.container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.bottom-layer, .top-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.top-layer {
  /* 初始遮罩：默认以容器中心为透明点，半径100px */
  mask-image: radial-gradient(circle 100px at 300px 200px, transparent 0%, black 0%);
  -webkit-mask-image: radial-gradient(circle 100px at 300px 200px, transparent 0%, black 0%);
}

JS交互逻辑：

const topLayer = document.querySelector('.top-layer')
const container = document.querySelector('.container')

container.addEventListener('mousemove', e => {
  // 获取鼠标相对于容器的坐标
  const mouseX = e.offsetX
  const mouseY = e.offsetY
  // 动态更新遮罩的中心位置
  const maskStyle = `radial-gradient(circle 100px at ${mouseX}px ${mouseY}px, transparent 0%, black 0%)`
  topLayer.style.maskImage = maskStyle
  topLayer.style.webkitMaskImage = maskStyle
})

• 效果调整说明：修改circle后的数值即可调整透明区域的大小；如果需要柔和的边缘过渡，可把渐变参数改为transparent 90%, black 100%，透明区域边缘会有自然的渐变效果。

方案2：Canvas混合模式实现 #

如果需要使用不规则透明区域、多位置同时透明等更复杂的效果，可以把上层内容绘制到Canvas元素上，监听鼠标位置后使用destination-out全局合成模式擦除光标周围的区域，灵活性更高，但实现步骤相对复杂。

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