背景重叠问题

Background overlapping issue

本文关键字：问题 重叠 背景      更新时间：2023-11-23

我正在制作一份问卷，询问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作为壁纸，然后当total < 10时，屏幕变红。

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

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

它将背景更改为twins.jpg，但在更改颜色时与红色重叠，因此我看不到它。

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

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

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

一旦你想去除背景色，你可以通过使其透明来完成：

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

在CSS中，类似background的属性和类似它的属性不会相互覆盖。如果你设置了图像，然后颜色，它们不会互相叠加。

为了解决您的问题，不要使用"背景图像"answers"背景颜色"，而是将它们都更改为"背景"，因为这将覆盖其他选择。

如果这能解决你的问题，请告诉我！（评论）

Bryce

相关文章：