CSS基础教程之背景属性
CSS背景属性
background-color：背景颜色。
background-image：背景图片地址。如：background-image:url(images/bg.gif)
background-repeat：背景平铺方式，取值：no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
background-position：背景定位。格式：background-position:水平方向定位 垂直方向定位；
用英文单词定位：background-position: left|center|right top|center|bottom;
用固定值定位：background-position: 50px 50px; //背景距离容器的左边50px，容器顶端50px
用百分比定位：background-position: 50% 50%; //水平居中，垂直居中
用混合定位：background-position: left 10px; //背景靠左边齐，距离容器顶端10px
简写方式
background：背景色 背景图 平铺方式 定位方式；
举例：background:url(images/bg.gif) no-repeat center center;
举例：background: #ccc url(images/bg.gif) no-repeat left 10px;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box1{
background-color:#f0f0f0;
width:400px;
}
.box2{
background-image:url(http://img1.imgtn.bdimg.com/it/u=1182781053,1047826690&fm=21&gp=0.jpg);
background-repeat:no-repeat;
background-position:center center;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div class="box1">
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</div>
<div class="box2">
</div>
</body>
</html>
