CSS中设置 背景色 及 背景图片:
案例中需要的图片:background.png
airplane.png:
hero0.png :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置页面背景</title>
<style type="text/css">
/* 1.设置背景图 */
body {
background:url("../images/background.png");
background-repeat:repeat-y;
background-position:center;
}
.enemy {
width:50px;
height:50px;
border:1px solid red;
}
.hero {
width:125px;
height:125px;
border:1px solid blue;
}
div {
margin:30px auto;
}
/* 2.采用简化的方式设置背景:
background:背景色 背景图 重复 位置:
上述4个值可以酌情省略,但至少要保留
背景色或背景图之中的一个值。 */
.enemy {
background:
url("../images/airplane.png")
no-repeat center;
}
.hero {
background:url("../images/hero0.png")
no-repeat center;
}
/* 3.设置背景图是否滚动 */
body {
background-attachment:fixed;
}
.test {
width:50px;
height:50px;
border:1px solid red;
background:#0488BB;
}
</style>
</head>
<body>
<!-- 敌机 -->
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="test"></div>
<!-- 英雄机 -->
<div class="hero"></div>
<div class="hero"></div>
</body>
</html>
最终页面效果:【滚动页面滚动条 背景图片不动 11个敌机与2英雄机会移动】