這里將會(huì)介紹如何通過(guò)background-image設(shè)置背景圖片，以及背景圖片的平鋪、拉伸、偏移、設(shè)置大小等操作。
1. 背景圖片樣式分類
CSS中設(shè)置元素背景圖片及其背景圖片樣式的屬性主要以下幾個(gè)：
background-image ：設(shè)置元素的背景圖片。
background-repeat ：設(shè)置如何平鋪背景圖片。
background-attachment ：設(shè)置背景圖片是否固定或隨著滾動(dòng)移動(dòng)。
background-position ：設(shè)置背景圖片的位置。
background-size ：設(shè)置背景圖片的大小。
下面將詳細(xì)說(shuō)明各屬性。
2. background-image ：設(shè)置元素的背景圖片
說(shuō)明：可設(shè)置元素的1個(gè)或多個(gè)背景圖片。
語(yǔ)法：<bg-image> [ , <bg-image> ]* | none
默認(rèn)值：none。 // 不設(shè)置元素的背景圖片。
擴(kuò)展：W3C規(guī)范、MDN資料
2.1 設(shè)置單個(gè)背景圖片
說(shuō)明：默認(rèn)情況下背景圖片進(jìn)行橫向和縱向平鋪。
1 | background-image:url('res/bgA.jpg') |
2.2 設(shè)置多個(gè)背景圖片
說(shuō)明：渲染時(shí)前面的背景圖片在上層、后面的背景圖片在下層。
1 2 | background-image:url('res/bgA.jpg'),url('res/bgB.jpg');background-repeat:no-repeat; |
3. background-repeat ：設(shè)置背景圖片的平鋪效果
說(shuō)明：設(shè)置背景圖片的平鋪效果，包括水平、垂直。
語(yǔ)法：<repeat-style> [ , <repeat-style> ]*
<repeat-style>= repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}默認(rèn)值：repeat //水平和垂直平鋪
擴(kuò)展：W3C規(guī)范、MDN資料
3.1 background-repeat:repeat-x | repeat-y | repeat-x | repeat-y
說(shuō)明：設(shè)定背景圖片水平、垂直平鋪。
示例：
1 2 3 4 5 | background-repeat:repeat-x; /* 表示水平平鋪 */background-repeat:repeat-y; /* 表示垂直平鋪 */background-repeat:repeat-x repeat-y; /* 水平和垂直平鋪(默認(rèn)) */ |
3.2 background-repeat:space | round | no-repeat
說(shuō)明：設(shè)置背景圖片的其他平鋪效果。
示例：
1 2 3 4 5 | background-repeat:space; /* 均勻的平鋪背景圖片，不會(huì)被裁剪 */background-repeat:round; /* 水平和垂直平鋪背景圖片，拉伸圖片以盡可能的填充背景，不會(huì)被裁剪 */background-repeat:no-repeat; /* 不進(jìn)行平鋪 */ |
4. background-attachment ：設(shè)置背景圖片是否固定或隨著滾動(dòng)移動(dòng)
說(shuō)明：設(shè)置背景圖片是否固定或隨著滾動(dòng)移動(dòng)。
語(yǔ)法：<attachment> [ , <attachment> ]*
<attachment>= scroll | fixed | local
默認(rèn)值：scroll // 背景圖片跟隨滾動(dòng)條一直滾動(dòng)
擴(kuò)展：W3C規(guī)范、MDN資料
1 2 3 4 5 | background-attachment:scroll; /* 跟隨滾動(dòng)條一起滾動(dòng)。(默認(rèn)) */background-attachment:fixed; /* 背景圖片固定位置，不隨著滾動(dòng)條滾動(dòng) */background-attachment:local; /* 跟隨內(nèi)容一起滾動(dòng) */ |
4.1 background-attachment:scroll; // 跟隨滾動(dòng)條一直滾動(dòng)。(默認(rèn))
4.2 background-attachment:local; // 跟隨內(nèi)容一起滾動(dòng)
5. background-position ：設(shè)置背景圖片的位置
說(shuō)明：設(shè)置背景圖片的位置，可設(shè)置背景圖片的4個(gè)邊角水平和縱向的起始位置。
語(yǔ)法：<position> [ , <position> ]*
默認(rèn)值：0% 0% // 背景圖片左上角定位于容器左上角
擴(kuò)展：W3C規(guī)范、MDN資料
5.1 background-position:10px; // 背景圖片水平方向與左邊緣相距10px，垂直居中
5.2 background-position:10px 20px; // 背景圖片水平方向與左邊緣相距0px，垂直方向與頂部邊緣相距20px
5.3 background-position:left 10px bottom 20px; // 背景圖片水平方向與左邊緣相距10px，垂直方向與底部邊緣相距20px
6. background-size ：設(shè)置背景圖片的大小
說(shuō)明：設(shè)置背景圖片的大小。
語(yǔ)法：<bg-size> [ , <bg-size> ]*
<bg-size>= [<length>|<percentage>| auto ]{1,2} | cover | contain默認(rèn)值：auto auto // 背景圖片的原始大小
擴(kuò)展：W3C規(guī)范、MDN資料
示例：
1 2 3 4 5 | background-size:100px; /* 背景圖片寬度為100px，高度為auto */background-size:100px 50%; /* 背景圖片寬度為100px，高度為容器高度的50% */background-size:100% 100%; /* 背景圖片寬度為容器寬度的100%，高度為容器高度的100% */ |
7. 在線示例
地址：http://www.akmsg.com/WebDemo/CSS3-background-image.html
==================================系列文章==========================================
本篇文章：8.2 CSS3 background-image背景圖片相關(guān)介紹
1.HTML
1.2 HTML基礎(chǔ)控件介紹
1.5 table、form表單標(biāo)簽的介紹以及get和post提交方式
1.6 HTML kbd鍵盤元素
2.CSS 層疊樣式表
2.1 CSS 選擇器及各樣式引用方式
3.JavaScript介紹
3.1 JavaScript var關(guān)鍵字、變量的狀態(tài)、異常處理、命名規(guī)范等介紹
3.2 JavaScript function函數(shù)種類
3.5 JavaScript Math和Number對(duì)象
3.10 JavaScript 開(kāi)發(fā)規(guī)范
4.BOM
4.3 HTML URL地址解析
5.DOM
5.1 HTML DOM 介紹
5.2 HTML DOM 對(duì)象
5.3 HTML 事件(一) 事件的介紹
6.HTML5
6.1 HTML5 介紹
6.2 HTML5 語(yǔ)義元素(一)頁(yè)面結(jié)構(gòu)
6.3 HTML5 語(yǔ)義元素(二)文本內(nèi)容
6.6 HTML5 sessionStorage會(huì)話存儲(chǔ)
6.7 HTML5 localStorage本地存儲(chǔ)
7.ExtJS 4.2
7.1 ExtJS 4.2 介紹
7.3 ExtJS 4.2 組件介紹
7.5 ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(一)主頁(yè)搭建
7.6 ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(二)數(shù)據(jù)展示和查詢
7.7 ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(三)數(shù)據(jù)添加和修改
7.9 ExtJS 4.2 Date組件擴(kuò)展：添加清除按鈕
7.10 ExtJS 4.2 評(píng)分組件
8.CSS 3
8.2 CSS3 background-image背景圖片相關(guān)介紹
只是記錄了自己在學(xué)習(xí)、使用Web前端內(nèi)容時(shí)的心得和碰到的問(wèn)題。
參考文獻(xiàn)：
2）《JavaScript權(quán)威指南(第六版)》
分類: CSS3
延伸閱讀
- CSS3學(xué)習(xí)系列之動(dòng)畫 2017-07-26
- CSS3-loading動(dòng)畫（五） CSS3-loading加載動(dòng)畫 2017-07-16
- CSS3集錦之新增選擇器、圓角、陰影、透明度、transition動(dòng)畫、transform變形、animation動(dòng)畫 2017-07-10
- HTML5+CSS3靜態(tài)頁(yè)面項(xiàng)目-BusinessTheme的總結(jié) 2017-07-10
- 用CSS3實(shí)現(xiàn)無(wú)限循環(huán)的無(wú)縫滾動(dòng) 2017-07-04
- CSS3學(xué)習(xí)系列之盒樣式（二） 2017-06-29
- css3實(shí)現(xiàn)可以計(jì)算的自適應(yīng)布局——calc() 2017-06-28
- 吃透css3之3d屬性--perspective和transform 2017-06-27
- 前端的3D(css3版本)--淘寶造物節(jié)3D創(chuàng)景的制作 2017-06-22
- CSS3學(xué)習(xí)系列之選擇器（四） 2017-06-19
CSS3集錦之新增選擇器、圓角、陰影、透明度、transition動(dòng)畫、transform變形、animation動(dòng)畫