.bg_x{
background:url('./背景1.jpg' )no-repeat center;
/*background:url('./背景2.jpg' )no-repeat center;*/
background-size:cover;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-10;
}
.bg_y{
/*background:url('./背景1.jpg' )no-repeat center;*/
background:url('./背景2.jpg' )no-repeat center;
background-size:cover;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-10;
}
body{
text-align: center;
}
div{
border-radius: 12px;
width:80%;
margin: 0 auto;
/*text-align: center;*/
}
.modern {
background-color:rgba(0,0,0,0.25);
display:inline-block;
position:relative;
-webkit-box-shadow:0px 0px 0px 1px rgba(255,255,255,0.4)inset;
-moz-box-shadow:0px 0px 0px 1px rgba(255,255,255,0.4)inset;
margin:0 6px 7px 0;
overflow:hidden;
}
.modern:hover {
margin-top:-3px;
margin-right:3px;
margin-bottom:4px;
margin-left:-3px;
border:3px solid #000;
}
.modern:active {
margin-top:-4px;
margin-right:2px;
margin-bottom:3px;
margin-left:-4px;
border:4px solid #000;
}
.button_x{
weight:10px;
height:20px;
border-radius: 5px;
}
.button_x:hover{
background-color: lime;
}
page.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
{% load staticfiles %}
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5">
<title>Welcome to this World！</title>
<link rel="shortcut icon" href="./xx.ico" type="/Public/images/x-icon">
<link rel="stylesheet" type="text/css" href="{% static "app/yy.css" %}">
<script type="text/javascript" src="{% static "app/change.js" %}"></script>
<body>
<bg id="bg" class="bg_x"></bg>
<div class="modern">
<h2>Templates</h2>
<p>************************************************************************</p>
<p>************************************************************************</p>
<p>************************************************************************</p>
</div>
</div>
<br>
<button class="button_x" onclick="change_bg_1()">背景1</button>
<button class="button_x" onclick="change_bg_2()">背景2</button>
</body>
</html>
更换背景原理：
点击按钮后，更改<bg>的class属性，同时在css文件中增加新属性(class)的样式；
function change_bg_1(){
document.getElementById('bg').className="bg_x";
}
function change_bg_2(){
document.getElementById('bg').className="bg_y";
}