当我向下滚动页面时，如何让不同的背景图像变亮？

.background-1 {
  background-image: url('background1.jpg');
}

.background-2 {
  background-image: url('background2.jpg');
}

.background-3 {
  background-image: url('background3.jpg');
}

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight;
  var elements = document.querySelectorAll('.background');

  for (var i = 0; i < elements.length; i++) {
    var elementOffsetTop = elements[i].offsetTop;
    var elementHeight = elements[i].offsetHeight;

    // 计算元素在视窗中的位置
    var elementInView = elementOffsetTop - scrollTop < windowHeight && elementOffsetTop - scrollTop + elementHeight > 0;

    if (elementInView) {
      // 根据滚动位置改变背景图像的亮度
      var brightness = (elementOffsetTop - scrollTop) / windowHeight;
      elements[i].style.filter = 'brightness(' + brightness + ')';
    }
  }
});