码迷,mamicode.com
首页 > Web开发 > 详细

CSS设置背景

时间:2017-09-24 20:27:59      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:position   tac   png   char   tle   图片   enter   border   ges   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*1.如何设置背景图片*/
body{
background-image: url(../images/background.png);
background-repeat: repeat-y;
background-position: center;
}
/*2.可以采用简化的方式一起设置背景色及背景图.语法如下
background:背景色 背景图 平铺 位置
以上四个可以酌情省略,但至少保留背景色或背景图中的一个*/
.enemy{
border: 1px solid red;
width: 50px;
height: 50px;
margin: 20px auto;
background: url(../images/airplane.png) no-repeat center;


}
.hero{
border: 1px solid red;
width: 125px;
height: 125px;
margin: 20px auto;
background: url(../images/hero0.png) no-repeat center;
}
/*3.固定背景图*/
body{
background-attachment: fixed;
}
</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="hero"></div>
<div class="hero"></div>

</body>
</html>

CSS设置背景

标签:position   tac   png   char   tle   图片   enter   border   ges   

原文地址:http://www.cnblogs.com/Bighua123/p/7588150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!