如何解决JavaScript动态更换背景图后backgroundSize丢失cover属性的问题

嘿，作为编程新手遇到这种样式重置的问题太正常了，我来帮你搞定它！

问题根源 #

当你用document.body.style.background直接设置新背景图时，这个复合CSS属性会重置所有和背景相关的子属性——包括你之前设置的backgroundSize: cover。这就是为什么每次换图后backgroundSize会变回默认的auto，因为你覆盖了整个background样式，却没在新设置里包含大小规则。

两种解决方案 #

方案1：单独修改backgroundImage（推荐）

不要用复合属性background，而是用backgroundImage单独替换背景图，这样不会影响backgroundSize、backgroundPosition等其他已设置的背景属性：

修改你代码里的这两段逻辑：

if (totalScore > 5) {
  // 只替换背景图，保留原有背景大小/定位设置
  document.body.style.backgroundImage = "url('/IMG/moebius3.jpg')";
  // 保险起见可以再显式设置一次，防止意外
  document.body.style.backgroundSize = "cover";
};
if (totalScore > 10) {
  document.body.style.backgroundImage = "url('/IMG/moebius.jpg')";
  document.body.style.backgroundSize = "cover";
};

方案2：在复合属性中包含backgroundSize

如果你习惯用background复合属性，记得在设置时同时指定backgroundSize，用CSS简写语法：

if (totalScore > 5) {
  // 同时指定背景图、重复方式、定位和大小
  document.body.style.background = "url('/IMG/moebius3.jpg') no-repeat center/cover";
};
if (totalScore > 10) {
  document.body.style.background = "url('/IMG/moebius.jpg') no-repeat center/cover";
};

这里的center/cover是backgroundPosition: center和backgroundSize: cover的简写，确保换图后大小规则不会丢失。

额外小提示 #

我还注意到你代码里有个小笔误：

} else {
  incorrect.style.display = "none";
  correct.style.display = "none";
  displayScore.display ="none"; // 这里应该是 displayScore.style.display
};

把displayScore.display改成displayScore.style.display，不然这段隐藏分数的逻辑不会生效哦～

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