Question

我正在制作一份问卷，询问10个问题并保留一个分数，称为total。我希望如果total < 10，屏幕变为红色，但我必须删除之前的壁纸：

/*body{
        background-image: url("twins.jpg");

    }*/  <-- which is now a comment

这样代码就可以了：

if (total < 10){ 
    alert("...RED SCREEN OF DEATH!");
    document.body.style.backgroundColor = "#AA0000";
}

现在，当用户得分低于10时，屏幕成功变为红色，但现在只有问题的一半解决了。

我的下一个问题是，我希望twins.jpg成为我的背景之前屏幕变为红色，这意味着我有twins.jpg作为我的壁纸，然后是{{1} }，屏幕变红。

我的问题是，这样做的正确方法是什么，以便在total < 10时我仍然可以看到背景变为红色？当我使用它时：

total < 10

它将背景更改为body{ background-image: url("twins.jpg"); }，但在更改颜色时重叠红色，因此我无法看到它。

Answer 1

在CSS中，背景及其属性之类的属性不会相互覆盖。如果你设置图像，然后是颜色，它们就不会相互叠加。

要解决您的问题，而不是使用“background-image”和“background-color”，请将它们更改为“background”，因为这将覆盖另一个选项。

如果这可以解决您的问题，请告诉我！（COMMENT）

布莱斯

Answer 2

解决此问题的最佳方法可能是您在内容周围创建<div id="redbg"></div>，其大小与<body>元素相同（通过添加100％的高度和宽度）。< / p>

然后将背景颜色添加到新div：

if (total < 10){ 
    document.getElementById('redbg').style.backgroundColor = "#AA0000";
}

只要您想要删除背景颜色，就可以通过使其透明来实现：

document.getElementById('redbg').style.backgroundColor = "transparent";