单击时更改 HTML 背景图像答案

【问题标题】：Change HTML background image on click单击时更改 HTML 背景图像
【发布时间】：2014-06-28 15:17:31
【问题描述】：

如何在点击时更改背景图片我有这个代码

html { 
  background: url(img01.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我有 5 个 div 和 .其中4个是隐藏的。当我单击按钮时，它显示我下一个 div 并隐藏上一个。当它显示下一个 div 时，我还想在 div 下显示新的背景图像。如何做到这一点:(

<div id='2' style="display: none;">
    <input type='button' div_funkcija(2);" value="Sehr-Gut">
    <input type='button' div_funkcija(2);" value="Gut">     
    <input type='button' div_funkcija(2);" value="Befriedigend">
    <input type='button' div_funkcija(2);" value="Ausreichend">
    <input type='button' div_funkcija(2);" value="Mangelhaft">
</div>

脚本是

function div_funkcija($div) {
    document.getElementById($div).style.display='none';
    document.getElementById($div+1).style.display='block';
}

现在，当它打开新 div 时，如何在 body 或 html 背景上显示新图像。

【问题讨论】：

标签： html css image background

【解决方案1】：

function div_funkcija($div)
        {
            document.getElementById($div).style.display='none';
            document.getElementById($div+1).style.display='block';
            document.getElementsByTagName('html')[0].style.backgroundImage='url(newImage.jpg) no-repeat center center fixed';
        }

或者你可以给 html 标签一个 ID 并使用 document.getElementById。只是一个额外的建议，我通常不设置html标签的样式，通常我引用正文。

【讨论】：

我不太擅长这个。如果我有 10 个相同的 div 并且我需要更改每个下的背景图像怎么办。所有背景都不一样。我会把图片放在哪里:( :(
您可以将图像 url 存储在数据属性中，例如：然后访问值类似于： document.getElementById(inputID).getAttribute('data-bgimg')

【解决方案2】：

有帮助的代码

<input type='button' Onclick="document.body.style.cssText+=';background-image: url(Cistoca.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;'" />

【讨论】：