上一篇文章為:→1.2.9定位
background屬性
**屬性解釋 **
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個復合屬性，它可以分解成如下幾個設置項：
- background-color 設置背景顏色
- background-image 設置背景圖片地址
- background-repeat 設置背景圖片如何重復平鋪
- background-position 設置背景圖片的位置
- background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動
實際應用中，我們可以用background屬性將上面所有的設置項放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設置background-color；“url(bgimage.gif)”是設置background-image；“no-repeat”是設置background-repeat；“left center”是設置background-position；“fixed”是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是可以的，它會使用默認值。
舉例：
下面這些例子使用下面這張圖片做為背景圖：
1、“background:url(bg.jpg)”，默認設置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。
2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重復，背景和盒子左上角對齊，盒子其他部分顯示背景顏色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復，背景和盒子左中對齊，盒子其他部分顯示背景顏色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。
相關代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
</style>
</head>
<body>
<div class="backshow bg1"></div>
<div class="backshow bg2"></div>
<div class="backshow bg3"></div>
<div class="backshow bg4"></div>
<div class="backshow bg5"></div>
<div class="backshow bg6"></div>
</body>
</html>
例子說明：
代碼中使用到的背景圖片，可以直接在頁面上的背景圖片上點右鍵另存下來，命名為：“bg.jpg”，并且和網頁文件存在同一個目錄下。
關于背景圖片的background-position的設置，設置背景圖片水平位置的有“left”、“center”、“right”，設置背景圖片垂直位置的有“top”、“center”、“bottom”，水平和垂直的屬性值兩兩組合，就可以把背景圖設置到對齊盒子的四個角或者四個邊的中心或者盒子的正中心位置。還可以設置具體的像素值來把背景圖片精確地定位到盒子的某個位置，特別是對于背景圖片尺寸大于盒子尺寸的這種情況，我們可以用數值定位，截取大圖片的某一塊做為盒子的背景。
比如說，我們想把下邊的盒子用右邊的圖片作為背景，并且讓背景顯示圖片中靠近底部的那朵花：
用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景，如果不設置background-position，默認背景圖的左上角會和盒子的左上角對齊，如果設置，可以用兩個數值定位背景圖，上面右邊的實現效果設置為：“background:url(location_bg.jpg) -110px -150px”，第一個數值表示背景圖相對于自己的左上角向左偏移110px，負值向左，正值向右，第二個數值表示背景圖相對于自己的左上角向上偏移150px，負值向上，正值向下。
實現原理示意圖：
對應代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
