總體內(nèi)容
1、background屬性的解釋
2、具體的舉例
一、background屬性的解釋：background屬性是css中應(yīng)用比較多贷帮，且比較重要的一個屬性，它是負(fù)責(zé)給盒子設(shè)置背景圖片和背景顏色的诱告，background是一個復(fù)合屬性撵枢，它可以分解成如下幾個設(shè)置項：
1.1、
background-color設(shè)置背景顏色-
1.2精居、
background-image設(shè)置背景圖片地址
設(shè)置背景圖片地址<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background屬性</title> <style type="text/css"> .box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); } </style> </head> <body> <div class="box1"></div> </body> </html>默認(rèn)設(shè)置一個圖片地址锄禽，圖片會從盒子的左上角開始將盒子鋪滿。
-
1.3靴姿、
background-repeat設(shè)置背景圖片如何重復(fù)平鋪,推薦一篇 background-repeat 相關(guān)播客-
(1)沃但、no-repeat：背景不重復(fù)，背景和盒子左上角對齊佛吓，盒子其他部分顯示背景顏色
no-repeat：背景不重復(fù)宵晚，背景和盒子左上角對齊.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: no-repeat; } (2)、repeat：背景圖像將向垂直和水平方向重復(fù)维雇。這是默認(rèn),也就是上面看到的
1.3的現(xiàn)象(3)淤刃、inherit：指定background-repea屬性設(shè)置應(yīng)該從父元素繼承
-
(4)、round：background-repeat取值為round時吱型，會像repeat一樣逸贾，背景圖片會平鋪整個容器，但和repeat不一樣的是津滞，他會根據(jù)容器尺寸和圖片尺寸做一個自適應(yīng)處理铝侵，不會像repeat一樣，造成圖片顯示不全触徐。當(dāng)圖片重鋪的次數(shù)不適合一個整數(shù)時哟沫，會重新調(diào)整，使圖片按整數(shù)平鋪在整個容器中锌介。類似于
background-size一樣會自動計算背景圖片尺寸。
round -
(5)猾警、space：
background-repeat取值為space時孔祸，和round又會不一樣，但也有類似之處发皿。類似之處是崔慧，背景圖片會平鋪整個容器，不會造成背景圖片裁剪穴墅；但也和round將不一樣惶室，使用space時温自，不夠整數(shù)背景圖片平鋪整個容器的時候，會將剩余的空間平均分配給相鄰背景之間皇钞。假設(shè)我們的容器是200 x 200悼泌，而背景圖片的尺寸是80 x 80。那么水平方向?qū)戒?code>2張背景圖夹界，而相鄰兩張背景圖之間會有一個40/(2-1) = 40間距馆里。同樣道理，在垂直方向會有一個40/(2-1) = 40的間距可柿。
space -
(6)鸠踪、repeat-x：橫向平鋪盒子，盒子其他部分顯示背景顏色复斥。
橫向平鋪盒子营密，盒子其他部分顯示背景顏色.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: repeat-x; } -
(7)、repeat-y：縱向平鋪盒子目锭，盒子其他部分顯示背景顏色
repeat-y：縱向平鋪盒子评汰，盒子其他部分顯示背景顏色。.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: repeat-x; }
-
-
1.4侣集、
background-position設(shè)置背景圖片的位置键俱，可以在水平方向設(shè)置left、center世分、right编振，在垂直方向設(shè)置top、center臭埋、bottom踪央，除了設(shè)置這些方位詞之外，還可以設(shè)置具體的數(shù)值瓢阴，可以任意組合畅蹂，舉例如下：-
(1)、舉例 1：水平居中荣恐，靠近底部
.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-position: center bottom; }水平居中液斜，靠近底部 -
(2)、舉例 2：設(shè)置具體的數(shù)值
設(shè)置具體的數(shù)值
提示：
background-position后面跟兩個參數(shù)是代表水平和垂直方向的設(shè)置 -
1.5叠穆、
background-attachment設(shè)置背景圖片是固定還是隨著頁面滾動條滾動
提示：實際應(yīng)用中少漆，我們可以用background屬性將上面所有的設(shè)置項放在一起，而且也建議這么做硼被，這樣做性能更高示损，而且兼容性更好，比如：“
background: #00FF00 url(bgimage.gif) no-repeat left center fixed”嚷硫，這里面的“#00ff00”是設(shè)置background-color检访；“url(bgimage.gif)”是設(shè)置background-image始鱼；“no-repeat”是設(shè)置background-repeat；“left center”是設(shè)置background-position脆贵；“fixed”是設(shè)置background-attachment医清，各個設(shè)置項用空格隔開，有的設(shè)置項不寫也是可以的丹禀，它會使用默認(rèn)值状勤。
二、具體的舉例
-
2.1双泪、通過雪碧圖來做如下布局：
通過雪碧圖來布局
雪碧圖 -
2.2持搜、代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧圖的制作</title> <style type="text/css"> .box{ background-color: yellow; width: 300px; height: 315px; list-style: none; margin: 50px auto 0; padding: 0px; } .box li{ height: 60px; border-bottom: 1px dotted #000000; line-height: 60px; text-indent: 50px; background: url(images/bg01.png) 0px 10px no-repeat; } .box .icon2{ background-position: 0px -71px; } .box .icon3{ background-position: 0px -154px; } .box .icon4{ background-position: 0px -235px; } .box .icon5{ background-position: 0px -315px; } </style> </head> <body> <ul class="box"> <li>飛馳人生</li> <li class="icon2">飛馳人生</li> <li class="icon3">飛馳人生</li> <li class="icon4">飛馳人生</li> <li class="icon5">飛馳人生</li> </ul> </body> </html>分析：5個
li本來要加載5張圖片，由于我們使用的雪碧圖在重復(fù)利用焙矛，改變的是同一張圖片的background-position,從而減少請求來獲取圖片的效果
