将文本与背景一起更改为新颜色，如Parallex背景

<div class="parallax">
  <div class="parallax__layer parallax__layer--base">
    <h1>文本内容</h1>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <img src="背景图片路径" alt="背景图片">
  </div>
</div>

.parallax {
  height: 100vh; /* 设置高度为浏览器视口高度 */
  overflow-x: hidden; /* 隐藏水平溢出内容 */
  overflow-y: auto; /* 启用垂直滚动条 */
  perspective: 1px; /* 创建透视效果 */
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--base {
  transform: translateZ(0); /* 设置基础层的位置 */
}

.parallax__layer--back {
  transform: translateZ(-1px); /* 设置背景层的位置 */
}

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var layers = document.getElementsByClassName('parallax__layer');

  for (var i = 0; i < layers.length; i++) {
    var speed = layers[i].getAttribute('data-speed');
    var yPos = -scrollTop * speed / 100;

    layers[i].style.transform = 'translate3d(0, ' + yPos + 'px, 0)';
  }
});