1. 背景圖片樣式分類
CSS中設(shè)置元素背景圖片及其背景圖片樣式的屬性主要以下幾個:
background-image :設(shè)置元素的背景圖片。
background-repeat :設(shè)置如何平鋪背景圖片。
background-attachment :設(shè)置背景圖片是否固定或隨著滾動移動。
background-position :設(shè)置背景圖片的位置。
background-size :設(shè)置背景圖片的大小。
下面將詳細(xì)說明各屬性。
2. background-image :設(shè)置元素的背景圖片
說明:可設(shè)置元素的1個或多個背景圖片。
語法:<bg-image> [ , <bg-image> ]* | none
默認(rèn)值:none。 // 不設(shè)置元素的背景圖片。
擴(kuò)展:W3C規(guī)范、MDN資料
2.1 設(shè)置單個背景圖片
說明:默認(rèn)情況下背景圖片進(jìn)行橫向和縱向平鋪。
1 | background-image : url ( 'res/bgA.jpg' ) |
2.2 設(shè)置多個背景圖片
說明:渲染時前面的背景圖片在上層、后面的背景圖片在下層。
1 2 | background-image : url ( 'res/bgA.jpg' ), url ( 'res/bgB.jpg' ); background-repeat : no-repeat ; |
3. background-repeat :設(shè)置背景圖片的平鋪效果
說明:設(shè)置背景圖片的平鋪效果,包括水平、垂直。
語法:<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
說明:設(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
說明:設(shè)置背景圖片的其他平鋪效果。
示例:
1 2 3 4 5 | background-repeat :space; /* 均勻的平鋪背景圖片,不會被裁剪 */ background-repeat :round; /* 水平和垂直平鋪背景圖片,拉伸圖片以盡可能的填充背景,不會被裁剪 */ background-repeat : no-repeat ; /* 不進(jìn)行平鋪 */ |
4. background-attachment :設(shè)置背景圖片是否固定或隨著滾動移動
說明:設(shè)置背景圖片是否固定或隨著滾動移動。
語法:<attachment> [ , <attachment> ]*
<attachment>= scroll | fixed | local
默認(rèn)值:scroll // 背景圖片跟隨滾動條一直滾動
擴(kuò)展:W3C規(guī)范、MDN資料
1 2 3 4 5 | background-attachment : scroll ; /* 跟隨滾動條一起滾動。(默認(rèn)) */ background-attachment : fixed ; /* 背景圖片固定位置,不隨著滾動條滾動 */ background-attachment : local ; /* 跟隨內(nèi)容一起滾動 */ |
4.1 background-attachment:scroll; // 跟隨滾動條一直滾動。(默認(rèn))
4.2 background-attachment:local; // 跟隨內(nèi)容一起滾動
5. background-position :設(shè)置背景圖片的位置
說明:設(shè)置背景圖片的位置,可設(shè)置背景圖片的4個邊角水平和縱向的起始位置。
語法:<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è)置背景圖片的大小
說明:設(shè)置背景圖片的大小。
<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.1 HTML頁面源代碼布局介紹
1.2 HTML基礎(chǔ)控件介紹
1.5 table、form表單標(biāo)簽的介紹以及get和post提交方式
1.6 HTML kbd鍵盤元素
2.CSS 層疊樣式表
2.1 CSS 選擇器及各樣式引用方式