CSS基礎(chǔ)教學(xué)之背景屬性
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：背景色?背景圖平鋪方式?定位方式；
- 範(fàn)例：background:url(images/bg.gif) no-repeat center center;
- #範(fàn)例：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>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</div>
<div class="box2">
</div>
</body>
</html>####### 
