如何用JavaScript调整含背景图片的background属性线性渐变？

你遇到的核心问题是：JS中修改.header-cover-main的background属性时，仅设置了线性渐变，覆盖了原本CSS里渐变+背景图的组合，导致背景图消失。要实现遮罩加深同时保留背景图，有两种可行方案：

方案一：在JS中完整设置背景属性（渐变+背景图） #

直接在修改background时，把背景图路径和相关样式一并写入，和CSS初始写法保持一致：

修改JS中mouseenter事件内的代码：

pageOpacity.style.background = "linear-gradient(180deg, rgba(30, 30, 30, 0.75) 50%, rgba(30, 30, 30, 0.75) 70%), url('../../img/CoverPage/CoverPic.jpg')";
// 补充背景尺寸和定位，避免样式丢失
pageOpacity.style.backgroundSize = "cover";
pageOpacity.style.backgroundPosition = "top center";

同时在mouseleave事件中恢复初始背景样式：

pageOpacity.style.background = "linear-gradient(180deg, rgba(30, 30, 30, 0.55) 50%, rgba(30, 30, 30, 0.55) 70%), url('../../img/CoverPage/CoverPic.jpg')";
pageOpacity.style.backgroundSize = "cover";
pageOpacity.style.backgroundPosition = "top center";

方案二：用CSS类切换（推荐，更易维护） #

这种方式将样式逻辑完全放在CSS中，JS仅负责添加/移除类，符合关注点分离原则，也避免重复写路径：

1. 在CSS中新增一个用于加深遮罩的类：

.header-cover-main.dark-overlay {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.75) 50%, rgba(30, 30, 30, 0.75) 70%), url("../../img/CoverPage/CoverPic.jpg");
  background-size: cover;
  background-position: top center;
}

2. 修改JS代码，用类切换代替直接修改style：

document.addEventListener("DOMContentLoaded", function() {
    let rightChevron = document.querySelector(".right-chevron");
    let slideInContainer = document.querySelector(".slidein-container.hank");
    let pageOpacity = document.querySelector(".header-cover-main");
  
    // 合并重复的mouseenter事件监听
    rightChevron.addEventListener('mouseenter', function() {
      setTimeout(function() {
          rightChevron.style.transform = "translateX(10px)";
          rightChevron.style.opacity = "0";
      }, 100); 

      setTimeout(function() {
          slideInContainer.style.transform = "translateX(-500px)";
          pageOpacity.classList.add("dark-overlay");
      }, 300); 
    });
    
    slideInContainer.addEventListener('mouseleave', function() {
        slideInContainer.style.transform = "translateX(500px)";
        rightChevron.style.opacity = "1";
        rightChevron.style.transform = "translateX(0px)";
        rightChevron.style.transition = "all ease-in 100ms 300ms";
        // 移除类恢复初始样式
        pageOpacity.classList.remove("dark-overlay");
    });
});

额外优化建议 #

把元素的过渡样式（transition）写在CSS里，避免在JS中重复设置：

.right-chevron {
  transition: all ease-out 200ms;
}
.slidein-container.hank {
  transition: all ease-out 300ms;
}

这样JS里只需修改transform和opacity即可，无需每次重新定义过渡规则。

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