<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>背景</title>
<style type="text/css">
body{
background-image:url("../images/background.png");
background-color:#ccc;
/*設(shè)置背景圖片固定*/
background-attachment: fixed;
}
.airplane{
width:200px;
height:200px;
border:1px solid blue;
background-image:url("../images/airplane.png");
background-repeat:no-repeat;
/*讓div水平居中*/
margin:10px auto;
/*讓小飛機(jī)水平居中*/
background-position:center;
}
.hero{
width:200px;
height:200px;
border:1px solid red;
/*背景圖片可以簡(jiǎn)寫 格式為:
background:背景色 背景圖 是否重復(fù) 位置
不用就省略不寫*/
background:url("../images/hero0.png") no-repeat center
}
</style>
</head>
<body>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="hero"></div>
<div class="hero"></div>
</body>
</html>
打飛機(jī)