添加背景圖
用 background-image 屬性，在元素的背景中添加圖形踊兜。
background-image屬性有一個(gè)值：url旦事，后面跟著放在括號(hào)里的圖形文件路徑青灼。
路勁可以是絕對(duì)url，也可以是相對(duì)url辽旋。
在使用相對(duì)url時(shí)浩嫌，如：
url(../images/bg.png)
../ 的作用是進(jìn)入當(dāng)前html文件的上一層目錄檐迟。
images/ 的作用是進(jìn)入“images文件夾”。
bg.png 指定要使用的圖像文件码耐。
HTML代碼：
<div class="div1"></div>
CSS代碼：
.div1 {
width: 900px;
height: 500px;
background-image: url(images/bg0002.jpg);
}
三種書寫方式
background-image: url(images/bg0002.jpg);
/* 路勁不加引號(hào) */
background-image: url("images/bg0002.jpg");
/* 路勁放在雙引號(hào)內(nèi) */
background-image: url('images/bg0002.jpg');
/* 路勁放在單引號(hào)內(nèi) */
以上三種書寫方式都是有效的（我懶所以都不加引號(hào)）追迟。
Web瀏覽器主要支持三種圖片格式：GIF，JPEG骚腥，PNG敦间。
這三種格式都有很好的壓縮效果，因此在互聯(lián)網(wǎng)中傳輸?shù)乃俣雀臁?br> 現(xiàn)在還有一種比較流行的格式：SVG束铭。
背景圖的平鋪方式
使用 background-repeat 來(lái)控制背景圖的平鋪方式廓块。
分別有6個(gè)值可選：repeat，no-repeat契沫，repeat-x带猴，repeat-y，round懈万，space拴清。
repeat
默認(rèn)值，會(huì)把圖片從左到右会通，從上到下鋪滿整個(gè)背景口予。
background-image: url(images/quan.png);
background-repeat: repeat;
所用到的圖片：
no-repeat
圖像只顯示一次，不進(jìn)行平鋪渴语。是一個(gè)非常常用的值苹威。
background-image: url(images/quan.png);
background-repeat: no-repeat;
repeat-x
沿著X軸橫向平鋪圖像
background-image: url(images/quan.png);
background-repeat: repeat-x;
repeat-y
沿著Y軸豎向平鋪圖像
background-image: url(images/quan.png);
background-repeat: repeat-y;
round
round平鋪圖像的方式和repeat一樣，不過(guò)不會(huì)裁剪圖像驾凶。背景圖不會(huì)被裁剪牙甫，而是被縮放，并排著一列列顯示调违。為了做到這一點(diǎn)窟哺，瀏覽器會(huì)扭曲各個(gè)圖像副本，因此會(huì)破壞圖像的縱橫比技肩。
background-image: url(images/quan.png);
background-repeat: round;
由于我所用的背景圖比較小且轨，所以變形的效果不明顯。
這次用的是Firefox瀏覽器虚婿。
space
space平鋪圖像的方式與repeat一樣旋奢，但是不會(huì)裁剪圖像的上部或下部。也就是說(shuō)然痊，space選項(xiàng)始終顯示完整的圖像至朗。因此，瀏覽器會(huì)在平鋪的各個(gè)圖像副本之間添加間隙剧浸。
background-image: url(images/quan.png);
background-repeat: space;
放大圖片和repeat的圖對(duì)比锹引，可以看出使用space的圖矗钟，圈圈之間是有一定空隙的。
這次用的是Firefox瀏覽器嫌变。
注意：在做這個(gè)筆記的時(shí)候（2017.11）round和space的兼容性都很差吨艇。并不是所有瀏覽器都兼容。
定位背景圖
background-position
用 background-position 屬性控制圖像位置腾啥《校可以通過(guò) 關(guān)鍵字、具體的值碑宴、百分比 來(lái)控制背景的橫向和縱向的起點(diǎn)软啼。
關(guān)鍵字
橫向：left，center延柠，right祸挪。
縱向：top，center贞间，bottom贿条。
HTML代碼：
<div class="div1"></div>
CSS代碼：
.div1 {
width: 900px;
height: 500px;
border: 1px solid #000;
background-image: url(images/quan.png);
background-repeat: no-repeat;
background-position: center;
}
那個(gè)圈圈的背景圖就會(huì)出現(xiàn)在div中央。因?yàn)?background-position 設(shè)置了 center增热。
如果只寫一個(gè) center整以，瀏覽器會(huì)解析為 x軸 和 y軸 都用了center屬性，所以縱橫都是居中峻仇。
在使用關(guān)鍵字時(shí)公黑，定義橫向和縱向的順序不重要。如 background-position:top right; 和 background-position: right top; 都是一樣的摄咆，瀏覽器會(huì)自動(dòng)識(shí)別關(guān)鍵字凡蚜。
我習(xí)慣先寫橫向，再寫縱向吭从。
精確的值
可以使用 像素 或 em 來(lái)設(shè)定背景圖的位置朝蜘。
需要指定2個(gè)值，第一個(gè)值控制橫向位置涩金，第二個(gè)值控制縱向位置谱醇。
（第一個(gè)值指明圖像的左邊與容器的左邊之間的距離，第二個(gè)值指明圖像的上邊與容器的上邊之間的距離步做。）
如
background-position: 5px 20px;
值：坐負(fù)右正副渴，上負(fù)下正。
可以使用負(fù)值全度，把背景圖移出左邊或上邊煮剧，隱藏部分圖像。
注意：使用像素或em尺寸時(shí)無(wú)法指定距離底邊或右邊的距離讼载，如果要把背景圖放在頁(yè)面或目標(biāo)元素的右下角轿秧，應(yīng)該使用關(guān)鍵字（right bottom），或者使用百分比咨堤。
百分比值
使用百分比值菇篡，可以把背景圖定位在與元素寬度成一定比例的某個(gè)點(diǎn)上。
但我從開發(fā)中得到的一個(gè)經(jīng)驗(yàn)是：如果能使用精確的值（像素或em）或者關(guān)鍵字來(lái)實(shí)現(xiàn)所需的效果一喘，就盡量不要使用百分比驱还。因?yàn)榘俜直戎翟诙ㄎ槐尘皥D很難處理。
如
background-position: 0% 0%;
background-position: 50% 50%;
background-position: 100% 100%;
看看下面我畫的示意圖就懂了
在（80% 20%）那里凸克，背景圖（80% 20%）的點(diǎn)和目標(biāo)元素（80% 20%）的點(diǎn)是重合的议蟆，（50% 50%）和（100% 100%）也是這樣。
所以說(shuō)萎战，如果能使用精確的值（像素或em）或者關(guān)鍵字來(lái)實(shí)現(xiàn)所需的效果咐容，就盡量不要使用百分比。因?yàn)榘俜直戎翟诙ㄎ槐尘皥D很難處理蚂维。
固定
可以使用 background-attachment 把背景圖固定在某個(gè)位置戳粒，意思就是 背景圖不隨屏幕滾動(dòng)而滾動(dòng)。
background-attachment有2個(gè)屬性：scroll 和 fixed 虫啥。
scroll是默認(rèn)值蔚约，即背景圖與文本和頁(yè)面中的其他內(nèi)容一起滾動(dòng)。
fixed的作用是把被背景圖固定在某個(gè)位置涂籽。比如想把頁(yè)頭部分固定在頁(yè)面最頂端苹祟，不隨頁(yè)面滾動(dòng)和滾動(dòng)。
可以看到右側(cè)滾動(dòng)條不管怎么滾動(dòng)评雌，背景圖依然是在左上角树枫。
CSS代碼：
background-image: url(images/logo0001.png);
background-repeat: no-repeat;
background-attachment: fixed;
動(dòng)圖好像簡(jiǎn)書無(wú)法顯示~~ 可以在我的訂閱號(hào)查看這個(gè)筆記：Rabbit_svip
定義背景圖的起點(diǎn)與區(qū)域
可以使用 background-origin 屬性重新定義圖像的起點(diǎn)。
這個(gè)屬性能告訴瀏覽器從元素的邊框柳骄、內(nèi)邊距還是內(nèi)容區(qū)域開始顯示背景圖团赏。
background-origin 有三個(gè)屬性：border-box、padding
-box耐薯、center-box舔清。
border-box：從邊框的左上角開始放置背景圖。
可以看出曲初，背景圖是在邊框開始的体谒。
HTML代碼：
<div class="div1"></div>
CSS代碼：
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: border-box;
}
padding-box：從內(nèi)邊距的左上角開始放置背景圖。瀏覽器一般使用這種方式放置背景圖臼婆。
第一個(gè)定義的背景圖是在邊框內(nèi)部的左上角抒痒。
HTML代碼：
<div class="div1"></div>
CSS代碼：
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
}
content-box：從內(nèi)容區(qū)域的左上角開始放置背景圖。
HTML代碼：
<div class="div1">content</div>
CSS代碼：
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: content-box;
}
background-clip 屬性是 background-origin 的一個(gè)好搭檔颁褂。
background-clip 也是有3個(gè)值：border-box故响、padding-box傀广、content-box。
border-box：讓背景圖只顯示在內(nèi)容和邊框的里面彩届。只有邊框有間隙時(shí)才可以注意到（如虛線）伪冰。瀏覽器一般以這種方式來(lái)顯示。
這里就不再舉例了樟蠕。
padding-box：讓背景圖只在內(nèi)邊距區(qū)域和元素的內(nèi)容里面顯示贮聂。
這時(shí)邊框上是沒有任何背景圖的。
HTML代碼：
<div class="div1">content</div>
CSS代碼：
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
background-clip: padding-box;
}
content-box：讓背景圖只顯示在內(nèi)容區(qū)里面寨辩。
注意我的代碼是有 10px 的 padding吓懈。
HTML代碼：
<div class="div1">content</div>
CSS代碼：
.div1 {
width: 300px;
height: 300px;
border: 10px dashed #000;
background-image: url(images/quan.png);
background-origin: padding-box;
background-clip: content-box;
}
我經(jīng)常用的搭配方式：
background-origin: content-box;
background-clip: content-box;
讓背景圖完整的顯示在內(nèi)容區(qū)里面。
注意：IE8及之前的版本都不支持 background-origin 和 background-clip 屬性靡狞。
縮放背景圖
通過(guò) background-size 屬性可以控制背景圖的尺寸耻警。
background-size可以通過(guò) 精確的值、百分比耍攘、關(guān)鍵字 來(lái)控制榕栏。
精確的值
background-size: 100px 200px;
第一個(gè)值控制 寬 ， 第二個(gè)值控制 高蕾各。
通過(guò)精確值控制扒磁，有可能會(huì)改變圖片原有的長(zhǎng)寬比例。
精確值還可以結(jié)合另一種方法控制背景圖式曲。
background-size: 100px auto;
把背景圖的寬度變成100px妨托，高度隨寬度自適應(yīng)。
即：只設(shè)置寬度或高度吝羞，另一個(gè)值設(shè)為 auto兰伤。
根據(jù)高度或者寬度，瀏覽器會(huì)根據(jù)圖像的縱橫比自動(dòng)設(shè)置另一個(gè)值钧排，因此圖像不會(huì)扭曲敦腔。
百分比
通過(guò)百分比控制寬度和高度，用法和精確的值是一樣的恨溜。
background-size: 100% 100%;
會(huì)使背景圖鋪滿整個(gè)載體容器符衔。使用百分比來(lái)控制背景圖大小，也很容易把圖像扭曲糟袁。
關(guān)鍵字
contain判族、cover。
contain：會(huì)根據(jù)元素的背景尺寸強(qiáng)制調(diào)整圖像的尺寸项戴，而且會(huì)保留圖像的縱橫比形帮。
使用contain時(shí)，瀏覽器會(huì)找到載體容器比較小的一條邊。
比如
width: 100px;
height: 200px;
這時(shí)辩撑，瀏覽器就會(huì)找到100px界斜，然后把圖像的寬變成100px，高度自適應(yīng)合冀。
再如
width:300px;
height:150px;
這時(shí)锄蹂，瀏覽器會(huì)找到150px，然后把圖像的高度變成150px水慨，寬度自適應(yīng)。
cover：強(qiáng)制讓圖像的寬度適應(yīng)元素的寬度敬扛，讓圖像的高度適應(yīng)元素的高度晰洒。
cover和contain相反，cover會(huì)選擇較大的那邊做參考邊啥箭。
如
width: 100px;
height: 200px;
因?yàn)閔eight比width要大谍珊，所以背景圖的高度和height設(shè)置的高度一樣，背景圖的寬度根據(jù)原圖的比例進(jìn)行放大急侥。
再如
width:300px;
height:150px;
此時(shí)width比height大砌滞，所以背景圖的寬度等于width，背景圖的高度隨原圖的比例進(jìn)行放大坏怪。
注意贝润，contain 和 cover 都不會(huì)改變?cè)瓐D的比例。
簡(jiǎn)寫方式
background: url(quan.png) center center / 50% no-repeat fixed #FFF;
翻譯一下：
background: 文件路勁（url） 定位（position：center） / 大新料（size：50%） 平鋪方式（repeat） 固定方式（fixed） 背景色（#FFF）打掘；
如果指定位置（background-position: center） 和 background-size 屬性，二者中間要加上 / 符號(hào)鹏秋。
注意：IE8不支持 background-size尊蚁、background-origin 和 background-clip 屬性。如果在簡(jiǎn)寫的 background 屬性中設(shè)置這幾個(gè)屬性侣夷，IE8會(huì)忽略整個(gè)生命横朋，不應(yīng)用在任何背景屬性。
在簡(jiǎn)寫的時(shí)候不是所有屬性都要全部指定百拓，而且通常不會(huì)全部指定琴锭。可以只指定一個(gè)屬性耐版，或者任意組合各個(gè)屬性祠够。
簡(jiǎn)寫時(shí)的其他注意事項(xiàng)：
background-color: yellow;
background: url(quan.png) no-repeat;
這時(shí)，黃色背景是完全看不到的粪牲。因?yàn)樵诘诙写a中用了簡(jiǎn)寫方式古瓤，瀏覽器遇到?jīng)]有指定顏色的background屬性（簡(jiǎn)寫）時(shí)，會(huì)把 background-color 設(shè)為 transparent（透明），從而把上一行 background-color 屬性覆蓋掉落君。
解決方法：
background: url(quan.png) no-repeat;
background-color: yellow;
把“詳細(xì)屬性”放在“簡(jiǎn)寫屬性”后面穿香，只會(huì)覆蓋“簡(jiǎn)寫屬性”的部分值。所以在使用簡(jiǎn)寫屬性的時(shí)候绎速，一定要注意書寫順序皮获！
HTML與CSS 目錄：HTML與CSS
上一篇：【CSS】著色與透明
