CSS3 background-image背景圖片相關介紹

標籤：線上   預設   選擇   percent   通過   tac   chm   string   target   

 

這裡將會介紹如何通過background-image設定背景圖片，以及背景圖片的平鋪、展開、位移、設定大小等操作。

 

1. 背景圖片樣式分類

CSS中設定元素背景圖片及其背景圖片樣式的屬性主要以下幾個：

background-image ：設定元素的背景圖片。

background-repeat ：設定如何平鋪背景圖片。

background-attachment ：設定背景圖片是否固定或隨著滾動移動。

background-position ：設定背景圖片的位置。

background-size ：設定背景圖片的大小。

下面將詳細說明各屬性。

 

2. background-image ：設定元素的背景圖片

說明：可設定元素的1個或多個背景圖片。

文法：<bg-image> [ , <bg-image> ]* | none

預設值：none。 // 不設定元素的背景圖片。

擴充：W3C規範、MDN資料

 

2.1 設定單個背景圖片

說明：預設情況下背景圖片進行橫向和縱向平鋪。

1	background-image:url(‘res/bgA.jpg‘)

 

2.2 設定多個背景圖片

說明：渲染時前面的背景圖片在上層、後面的背景圖片在下層。

12	background-image:url(‘res/bgA.jpg‘),url(‘res/bgB.jpg‘);background-repeat:no-repeat;

 

3. background-repeat ：設定背景圖片的平鋪效果

說明：設定背景圖片的平鋪效果，包括水平、垂直。

文法：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

預設值：repeat //水平和垂直平鋪

擴充：W3C規範、MDN資料

 

3.1 background-repeat:repeat-x | repeat-y | repeat-x | repeat-y

說明：設定背景圖片水平、垂直平鋪。

樣本：

12345

background-repeat:repeat-x; /* 表示水平平鋪 */ background-repeat:repeat-y; /* 表示垂直平鋪 */ background-repeat:repeat-x repeat-y; /* 水平和垂直平鋪(預設) */

 

3.2 background-repeat:space | round | no-repeat

說明：設定背景圖片的其他平鋪效果。

樣本： 

12345

background-repeat:space; /* 均勻的平鋪背景圖片，不會被裁剪 */ background-repeat:round; /* 水平和垂直平鋪背景圖片，展開圖片以儘可能的填充背景，不會被裁剪 */ background-repeat:no-repeat; /* 不進行平鋪 */

 

4. background-attachment ：設定背景圖片是否固定或隨著滾動移動

說明：設定背景圖片是否固定或隨著滾動移動。

文法：<attachment> [ , <attachment> ]*

<attachment> = scroll | fixed | local

預設值：scroll // 背景圖片跟隨捲軸一直滾動

擴充：W3C規範、MDN資料

12345

background-attachment:scroll; /* 跟隨捲軸一起滾動。(預設) */ background-attachment:fixed; /* 背景圖片固定位置，不隨著捲軸滾動 */ background-attachment:local; /* 跟隨內容一起滾動 */

4.1  background-attachment:scroll; // 跟隨捲軸一直滾動。(預設) 

 

4.2 background-attachment:local; // 跟隨內容一起滾動

 

5. background-position ：設定背景圖片的位置

說明：設定背景圖片的位置，可設定背景圖片的4個邊角水平和縱向的起始位置。

文法：<position> [ , <position> ]*

預設值：0% 0% // 背景圖片左上方定位於容器左上方

擴充：W3C規範、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 ：設定背景圖片的大小

說明：設定背景圖片的大小。

文法：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

預設值：auto auto // 背景圖片的原始大小

擴充：W3C規範、MDN資料

樣本：

12345

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背景圖片相關介紹

Web開發之路系列文章

1.HTML

　　1.1 HTML頁面原始碼布局介紹

　　1.2 HTML基礎控制項介紹

　　1.3 iframe 和 frameset 的區別

　　1.4 name、id、class 的區別

　　1.5 table、form表單標籤的介紹以及get和post提交方式

　　1.6 HTML kbd鍵盤元素

2.CSS 層疊樣式表

　　2.1 CSS 選取器及各樣式引用方式

轉寄自：：http://www.cnblogs.com/polk6/

CSS3 background-image背景圖片相關介紹