如何通过CSS/JS实现背景变暗并保留光标周围高亮的手电筒效果？

嘿，这两个视觉效果其实都能通过CSS混合技巧+一点点JS监听鼠标移动来实现，我直接给你上可运行的代码和详细解释，看完就能搞定：

实现思路 #

先通过CSS滤镜把背景图整体提亮，再叠加一层半透明遮罩压暗整体亮度，最后用JS控制遮罩上的径向渐变，让鼠标位置露出完全透明的区域——这样光标周围就会比整体提亮后的背景更亮，完美契合需求。

代码实现 #

<div class="brighten-container">
  <!-- 这里可以放你的页面内容 -->
</div>

.brighten-container {
  width: 100vw;
  height: 100vh;
  background: url('你的背景图地址') center/cover no-repeat;
  /* 整体提亮背景，数值越大越亮，可自行调整 */
  filter: brightness(1.4);
  position: relative;
  overflow: hidden;
}

.brighten-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 默认半透明黑遮罩，压暗提亮后的整体背景 */
  background: rgba(0, 0, 0, 0.2);
  /* 初始径向渐变，透明圆默认在左上角 */
  background-image: radial-gradient(circle at 0 0, transparent 60px, rgba(0,0,0,0.2) 60px);
  /* 遮罩不干扰鼠标点击等事件 */
  pointer-events: none;
}

const overlay = document.querySelector('.brighten-overlay');

// 监听鼠标移动，实时更新透明圆位置
document.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;
  // 60px是透明圆的半径，可自行调整大小
  overlay.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, transparent 60px, rgba(0,0,0,0.2) 60px)`;
});

小优化 #

如果想要光标区域的亮度过渡更自然，可以把径向渐变的边缘改成带模糊的：

overlay.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, transparent 60px, rgba(0,0,0,0.2) 70px)`;

实现思路 #

这是更经典的手电筒效果：给固定背景叠加一层全黑（或半透明黑）的遮罩，然后用JS控制遮罩上的径向渐变，让鼠标位置显示透明区域——这样只有光标划过的地方能看清背景，其他区域都是暗的。

代码实现 #

<div class="flashlight-container">
  <!-- 页面内容放在这里 -->
</div>

.flashlight-container {
  width: 100vw;
  height: 100vh;
  background: url('你的背景图地址') center/cover fixed no-repeat;
  position: relative;
  overflow: hidden;
}

.flashlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 全黑遮罩，把背景完全调暗；如果想要保留一点背景亮度，改成rgba(0,0,0,0.8) */
  background: #000;
  /* 初始透明圆在左上角 */
  background-image: radial-gradient(circle at 0 0, transparent 80px, #000 80px);
  pointer-events: none;
}

const flashlightOverlay = document.querySelector('.flashlight-overlay');

document.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;
  // 80px是手电筒光斑的大小，可按需调整
  flashlightOverlay.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, transparent 80px, #000 80px)`;
});

适配触摸设备 #

如果需要支持手机触摸，只需添加触摸事件监听：

document.addEventListener('touchmove', (e) => {
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  flashlightOverlay.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, transparent 80px, #000 80px)`;
});

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