background 複合格式順序

background是複合屬性，它可以細分為多個子屬性。

與之類似，margin、padding或者border等也是複合屬性。

以border屬性為例子，複合寫法如下：

[CSS] 純文字檢視 複製程式碼
border:2px solid #ccc;

下面拆分複合屬性，將子屬性單獨列出：

[CSS] 純文字檢視 複製程式碼
border-width:2px;
border-style:solid;
border-color:#ccc;

background也是同樣道理，但是它的複合寫法遠比border等屬性複雜，且使用極為頻繁。

關於此屬性的基本用法參閱CSS background 背景一章節。

下面通過圖示結合程式碼例項詳細介紹一下background屬性複合寫法格式。

一.background包含的子屬性：

此屬性可以細分為如下幾個子屬性：

（1）.background-color：設定元素背景顏色。

（2）.background-image：設定元素背景圖片。

（3）.background-repeat：設定元素背景圖片重複方式。

（4）.background-attachment：設定元素背景圖片是否固定。

（5）.background-position：設定元素背景圖片位置。

（6）.background-size：設定背景圖片大小。

（7）.background-origin：設定背景圖片原點位置。

（8）.background-clip：對背景圖片進行裁切。

後三個屬性是CSS3新增，具體用法參閱如下三篇文章：

（1）.CSS3 background-size屬性一章節。

（2）.CSS3 background-origin屬性一章節。

（3）.CSS3 background-clip屬性一章節。

二.複合方式語法：

background包含眾多子屬性，且有些子屬性的值極為相似，甚至完全相同。

為了避免出現歧義，所以在語法上有些特別規定。

語法結構：

[CSS] 純文字檢視 複製程式碼
background:
    [background-color] 
    [background-image] 
    [background-repeat]
    [background-attachment] 
    [background-position] / 
    [background-size]
    [background-origin] 
    [background-clip];

特別說明：子屬性可以省略，那麼將採用預設值。

上面的語法結構有兩個地方需要特別注意：

（1）.background-position和background-size用斜槓分隔：

兩個屬性的值非常的類似，比如都可以使用如下形式：

[CSS] 純文字檢視 複製程式碼
background-position:5px 8px;
background-size:5px 8px;

兩個屬性值都規定的話，需要用斜槓分隔。

如果規定一個，那麼僅對background-position屬性有效，background-size採用預設值。

（2）.background-origin與background-clip:

兩個屬性值完全相同，分別如下：

border-box

padding-box

content-box

如果只規定一個，對兩個屬性都有效，如果規定兩個，它們之間不需要使用斜線分隔。

三.注意點總結：

下面再來總結一下background屬性需要注意的點。

（1）.url與後面的小括號之間不能存在空格，否則會報錯，正確寫法url()。

（2）.同時規定背景色與背景圖片，圖片會覆蓋在顏色之上。

（3）.對於各個子屬性的順序官方並沒有強制要求，可能有朋友會問background-position和background-size兩個屬性不就固定順序了嗎，既然它們之間需要用斜線分隔了，可以看做一個整體處理。

（4）.即便是沒有強制規定順序，但是還是推薦使用上文語法結構中的順序書寫程式碼，這是慣用的順序，有利於團隊開發或者別人閱讀程式碼。