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>####### 
