（原谅我的英语不好）
我有几个 div。它们都应该具有相同的背景图像。所以我给他们上了同一堂课。在 style.css 中，我通过 URL 设置此类的背景图像。一切正常。 但现在我想改变背景图片。所以我给了 div 一个 onclick 函数。 此功能将新的背景图像放置在旧的背景图像下方。
我已经尝试了很多：
首先，我尝试在 onclick 函数中重置 URL：
chal = document.getElementById('chal' + x + n);
chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
我以为它会取代背景图像，但旧的仍然显示。
然后我删除了第一个背景图像，以查看更改订单是否有效。 它起作用了。因此，如果之前没有设置背景图片，则会显示新的背景图片。
现在我知道我的新背景将被加载。 所以我尝试在 javascript 中设置第一个背景并删除 CSS 中的背景图像：
document.getElementsByClassName("")[0].style.backgroundImage = "url('');它也有效。第一个背景图像已加载（只是第一个，但无论如何）。但如果我点击什么也不会发生。
现在我尝试在设置新背景之前删除第一个背景：
chal.style.backgroundImage = "";
chal.style.removeProperty("background-image");
chal.style.backgrond = "none";
但是所有这些尝试都没有奏效。唯一改变的是我现在可以在旧背景图像下看到新背景图像的边缘。
所以我不知道如何解决这个问题，而不产生大量可能不必要的代码。 也许让每个 div 都带有新背景并使用 display: none 。但我希望你能帮助我，找到更聪明的方法。
谢谢！
这是代码：
HTML：
<!DOCTYPE html>
<html lang="de">
<head>
[...]
<link rel="stylesheet" href="snake_style.css">
</head>
<body>
<main>
<div>
<div id="chalA1" class="challenges bronze" onclick="giveXP('A', 1)"></div>
<div id="chalA2" class="challenges bronze" onclick="giveXP('A', 2)"></div>
[...]
<div id="chalB1" class="challenges bronze" onclick="giveXP('B', 1)"></div>
<div id="chalB2" class="challenges bronze" onclick="giveXP('B', 2)"></div>
[...]
</div>
<script type="text/javascript" src="snake_script.js"></script>
</main>
</body>
**CSS:**
.challenges {
background-repeat:no-repeat;
background-position: center center;
background-size: contain;
display:flex;
justify-content: center;
align-content: center;
margin: 0.25rem;
padding:0;
border: none;
}
.bronze{
background-image: url(../../../images/backgrounds/challenge_unknown_bronze.png);
}
.silver {
background-image: url(../../../images/backgrounds/challenge_unknown_silver.png);
}
.gold {
background-image: url(../../../images/backgrounds/challenge_unknown_gold.png);
}
ja**vascript:**
let chal;
function giveXP(x, n) {
[...]
chal = document.getElementById('chal' + x + n);
chal.style.backgroundImage = "";
chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
[...]
}
当您使用 JavaScript 更改 bg-image 时，请勿将路径括在引号内
更改此：
chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
对此：
chal.style.backgroundImage = "url(../../../images/backgrounds/challenge_unknown_gold.png)";
这是您可以看到的示例：
const bgImage = document.querySelector('.bg-image');
const changeBgBtn = document.querySelector('.change-bg-btn');
changeBgBtn.addEventListener('click', () => {
bgImage.style.backgroundImage = `url(https://cdn.pixabay.com/photo/2016/11/19/15/32/laptop-1839876_1280.jpg)`;
bgImage.style.backgroundPosition = 'left center';
})* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.bg-image {
width: 100%;
height: 100vh;
background-image: url("https://cdn.pixabay.com/photo/2016/11/23/14/45/coding-1853305_1280.jpg");
background-position: top right;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.change-bg-btn {
padding: 14px 20px;
border: none;
outline: none;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
font-size: 1.2rem;
}<div class="bg-image">
<button class="change-bg-btn">Change Background</button>
</div>