1.html 和 css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哈哈,我又变帅了</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("images/1.jpg");
}
#mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style>
</head>
<body id="bd">
<div id="mask">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
</body>
</html>
2.javascript代码
<script>
//获取所有img标签
var imgObjs = document.getElementById("mask").children;
//遍历循环所有img对象
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick = function(){
document.body.style.backgroundImage = "url("+this.src+")";
}
}
</script>