小飞机案例
2016-11-30 本文已影响22人
itachi
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>背景</title>
<style type="text/css">
body{
background-image:url("../images/background.png");
background-color:#ccc;
/*设置背景图片固定*/
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;
/*让小飞机水平居中*/
background-position:center;
}
.hero{
width:200px;
height:200px;
border:1px solid red;
/*背景图片可以简写 格式为：
background：背景色 背景图 是否重复 位置
不用就省略不写*/
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>
打飞机
