亮度滤镜不适用于机身背景色

Question

所以我通过内联样式（JavaScript）制作了这个亮度范围输入，通过添加过滤器来操纵亮度：亮度（x％）到document.body

这是代码

function ChangeBrightness() {
  let BrightnessValue = document.getElementById("brightness-bar").value;
  localStorage.setItem("Brightness", BrightnessValue.toString());
  document.body.style.filter = `brightness(${BrightnessValue}%)`;
}

这是body的css样式

body.Light {
  background: var(--white);
}

但是当我使用它时，它看起来像这样： [1]：

如您所见，亮度滤镜对那些实际上是可见的身体背景的小线没有任何影响，因为我应用于其他元素

Answer 1

我会在页面底部添加一个覆盖 div，并更改其不透明度，以控制页面的亮度。这样你会遇到更少的问题。示例：

const range = document.querySelector('#brightness');
const overlay = document.querySelector('.overlay');
range.addEventListener('change', (e) => {
  overlay.style.opacity = `${100 - e.target.value}%`;
})

.overlay {
  pointer-events: none;
  background-color: black;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

<div>
  <input type="range" id="brightness" name="brightness" min="0" max="100" value="100" />
  <label for="brightness">Brightness</label>
</div>
<div class="overlay"></div>