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

標籤：string   資料   als   body   選擇   相關   搭建   添加   指南   

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

這裡將會介紹如何通過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 選取器及各樣式引用方式

　　2.2 CSS HTML元素布局及Display屬性

　　2.3 CSS Float 浮動屬性

　　2.4 CSS Position 定位屬性

3.JavaScript介紹

　　3.1 JavaScript var關鍵字、變數的狀態、異常處理、命名規範等介紹

　　3.2 JavaScript function函數種類

　　3.3 JavaScript Array對象

　　3.4 JavaScript Date對象

　　3.5 JavaScript Math和Number對象

　　3.6 JavaScript String對象

　　3.7 JavaScript Object對象

　　3.8 JavaScript 自訂對象

　　3.9 JavaScript 對象屬性介紹

　　3.10 JavaScript 開發規範

4.BOM

　　4.1 HTML BOM Browser對象

　　4.2 HTML 擷取螢幕、瀏覽器、頁面的高度寬度

　　4.3 HTML URL位址解析

5.DOM

　　5.1 HTML DOM 介紹

　　5.2 HTML DOM 對象

　　5.3 HTML 事件(一) 事件的介紹

　　5.4 HTML 事件(二) 事件的註冊與登出

　　5.5 HTML 事件(三) 事件流與事件委託

　　5.6 HTML 事件(四) 類比事件操作

6.HTML5

　　6.1 HTML5 介紹

 　  6.2 HTML5 語義元素(一)頁面結構

 　  6.3 HTML5 語義元素(二)常值內容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控制項 

　　6.6 HTML5 sessionStorage會話儲存

　　6.7 HTML5 localStorage本機存放區 

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介紹

　　7.2 ExtJS 4.2 第一個程式

　　7.3 ExtJS 4.2 組件介紹

　　7.4 ExtJS 4.2 組件的尋找方式

　　7.5 ExtJS 4.2 業務開發(一)首頁搭建

　　7.6 ExtJS 4.2 業務開發(二)資料展示和查詢

　　7.7 ExtJS 4.2 業務開發(三)資料添加和修改

　　7.8 ExtJS 4.2 Grid組件的儲存格合并

　　7.9 ExtJS 4.2 Date組件擴充：添加清除按鈕

　　7.10 ExtJS 4.2 評分組件

8.CSS 3

　　8.1 CSS3 border-radius邊框圓角

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

 

只是記錄了自己在學習、使用Web前端內容時的心得和碰到的問題。

參考文獻：

1）http://www.w3school.com.cn/

2）《JavaScript權威指南(第六版)》

 

 

分類: CSS3轉載：https://i.cnblogs.com/EditPosts.aspx?opt=1

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