使用滑块调节网页亮度：全屏div与filter方案均遇问题求解决

方案1：使用全屏伪元素（不阻挡交互） #

不用额外添加div，给html元素设置伪元素，通过pointer-events: none让它不拦截鼠标交互，既能实现全屏亮度调节，又不影响下层元素的点击、输入等操作。

示例代码：

/* 基础样式 */
html::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 核心：不阻挡交互 */
  z-index: 9999;
  transition: all 0.3s ease;
}

JS控制滑块逻辑：

const slider = document.getElementById('brightness-slider');
slider.addEventListener('input', (e) => {
  const value = e.target.value / 100; // 假设滑块取值范围0-100
  // 两种调节方式二选一：
  // 方式1：用遮罩层透明度控制明暗
  const alpha = 1 - value;
  document.documentElement.style.setProperty('--mask-alpha', alpha);
  html::after { background: rgba(0,0,0,var(--mask-alpha)); }
  
  // 方式2：用brightness滤镜直接调节
  document.querySelector('html::after').style.filter = `brightness(${value})`;
});

方案2：给html元素应用filter（避免body布局异常） #

之前给body加filter出现布局问题，是因为body作为文档流容器存在margin、默认高度等特性，换成给html根元素加filter，能大幅降低布局异常概率。如果仍有渲染抖动，可添加transform: translateZ(0)触发硬件加速解决。

示例代码：

html {
  transition: filter 0.3s ease;
}

JS控制：

const slider = document.getElementById('brightness-slider');
slider.addEventListener('input', (e) => {
  const brightness = e.target.value / 100;
  document.documentElement.style.filter = `brightness(${brightness})`;
  // 若出现布局异常，启用下面一行
  // document.documentElement.style.transform = 'translateZ(0)';
});

方案3：给页面主容器加filter（精准控制范围） #

如果页面有包裹所有内容的主容器（比如<div id="app">），直接给这个容器加filter，完全不会影响body的原生布局，是最稳妥的方式。

示例代码：

#app {
  transition: filter 0.3s ease;
}

JS控制：

const slider = document.getElementById('brightness-slider');
const app = document.getElementById('app');
slider.addEventListener('input', (e) => {
  const brightness = e.target.value / 100;
  app.style.filter = `brightness(${brightness})`;
});

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