在HTML5中加载不同的背景图像

Question

我的要求是，我有2个背景图片（img1 nad img2）并且在加载页面时img1应该加载并且在此图像之上一个按钮应该创建并单击按钮，背景图像img1应该消失并且img2必须出现。我想使用HTML5来使用这种情况。

有人可以建议代码，怎么做？

Answer 1

试试这个，这个代码会在页面加载时自动加载。所以你不需要为onload=""事件编写任何JS代码。这样，后台将在加载时设置。

<div id="div"></div>

此元素的CSS代码为。

#div {
  background-image: url('image/url/file1.png');
}

然后点击，使用此按钮和该按钮的事件处理程序。

<button onclick="changeimage()">Click Me</button>

对于函数，使用此代码替换当前图像的src属性

function changeimage() {
    document.getElementById("div").style.backgroundImage = "url('link/to/file2.png')";
}

这样第一张图片将在开始时加载。并且当按钮上发生单击事件时。 src将更改为第二个图像，它将替换为第二个图像。用于元素的HTML5和用于图像替换的纯JS！ ：）