背景屬性－background是css中的核心屬性。你應該對它有充分的了解。這篇文章詳細討論了background的所有相關屬性，甚至包括background-attachment，也為我們介紹了它在即將到來的CSS3中的樣子，還有那些新加入的背景屬性。
使用CSS2中的背景屬性
回顧
css2中有五個與背景相關的屬性。它們是：
background-color: 完全填滿背景的顏色
background-position: 決定背景圖片的位置 平
background-attachment: 決定背景圖片是否隨頁面滾動
這些屬性能夠寫在一個簡單的屬性中：background。必須指出background負責元素內容部分的背景，包括padding和border，但不包括margin。在Firefox, Safari 和Opera, 以及IE8中是這樣處理的。不過在IE7 和萬惡的IE6中就沒包括border，差別就像下面的圖片範例顯示的 。
在IE7 和IE6中Background沒有包含border
基本屬性
Background color屬性
background-color用來描述設定填滿背景的顏色。有多種方法來定義決定填充的顏色，下列方法都是等效的：
background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff ;
background-color 也能設定成transparent，讓其下的元素顯示出來。
Background image屬性
background-image 讓你可以使用自己的圖片作為背景。它和background-color關係密切。一旦你的圖片不足以平鋪整個元素背景，空出的部分將顯示background-color設定的顏色。它的使用極為簡單，不過要記得圖片與css檔案的位置關係：
background-image: url(image.jpg);
如果圖片在資料夾內，就寫成這樣，均是用得相對路徑:
background-image: url(images/image.jpg);
Background repeat屬性
預設情況下你的圖片會水平和垂直重複直至鋪滿整個元素。但有時你可能只想朝一個方向重複。那就這麼設定：
background-repeat: repeat; /* 預設值. 會在所有方向重複鋪展圖片*/
background-repeat: no-repeat; /* 不重複。圖片只出現一張*/
background-repeat: repeat-x; /* 水平重複鋪展*/
background-repeat: repeat-y; /* 垂直重複鋪展*/
background-repeat: inherit; * 使用父元素的background-repeat屬性值. */
Background position屬性
background-position屬性控制背景圖片在元素中的位置。掌握的關鍵是background-position 是圖片的左上角定位。
下面是background-position屬性的示範。當然我們把background-repeat 屬性設定為no-repeat。
/* Example 1: 預設. */
background-position: 0 0; /* i.e. 元素的左上角. */
/* Example 2: 移向右邊. */
/* Example 2: 移向右邊. */ 75-position 0;/* Example 3: 移向左邊. */background-position: -75px 0;/* Example 4: 向下移動. */background-position: 0 100p在且可有條件下設定背景圖片的位置
background-position 屬性也可以以關鍵字，百分比等單位工作，並非一定要精確使用像素（px）。
關鍵字很常用，在水平方向有:
left
center
right
垂直方向有:
top:
background-position: top right;
百分比的使用方法也是一樣:
background-position: 100% 50%;
效果就是這樣：右邊笑
Background attachment屬性background-attachment屬性定義使用者捲動頁面時背景圖片會發生什麼。它有三個可能值：scroll, fixed and inherit. Inherit 仍然是繼承其父元素的設定要充分理解background-attachment屬性。首先就得搞清用戶滾動頁面時，web頁面發生了什麼事。如果你設定值為fixed，那麼當你向下滾動頁面時，內容向下滾動了，而背景不會跟著滾動。結果就好像內容向上在捲動。當然，如果你設為scroll，背景就會滾動了。下面我們要看一個例子：
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-seat; ;
當我們向下捲動頁面時,背景圖片向上捲動至消失.
再看一個fixed範例:
background-image: url(test-image.jpg); : 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
向下滾動頁面，背景圖片依然可見.
向下滾動頁面，背景圖片依然可見.
向下滾動頁面，背景圖片依然可見.
向下滾動頁面，背景圖片依然可見.
向下滾動圖片。內移動，下面就是一個例子：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
-attachment: fgroundix ;
部分圖片消失了，因為出元素邊界了.
簡單的Background屬性
我們可以把這些屬性設定寫在一個屬性內. 它的格式如下:
background:
例如, 這些設定...
background-color: transparent;
background-image: url(image.jpg);
background-image: url(image.jpg);
50% 0 ;background-attachment: scroll;background-repeat: repeat-y;... 可以寫成:background: transparent url(imagerep.jpg) 50% 0yscroll;而且你無需設定每個值。如果你不寫，就會使用預設值。因此，上面的也可寫成這樣：
background: url(image.jpg) 50% 0 repeat-y;
背景的「非常規」應用
背景屬性除了美化元素之外，還有其他廣泛的元素之外，還有其他廣泛的非常規用途。
Faux Columns
當使用float屬性佈局時，確保兩縱行長度相等可比較困難。如果兩個元素大小不一，那背景圖就亂了。 Faux columns是個簡單的解決方案，首先發表在A List Apart。
簡單的說就是在它們的父元素中設置一個整體的背景圖片，圖片中縱行的位置與分開的實際位置正好符合。
Text Replacement
web上字型的選取空間很小。我們常用的方法是製作文字的圖片，不過只這麼乾就對搜尋引擎不友善了。為此一個流行的方法是用背景屬性顯示文字的圖片，而把其上的文字隱藏起來。這樣既對搜尋引擎和螢幕閱讀器友好，在瀏覽器裡也能看到酷炫的字體。
例如，文字訊息這樣寫:
如果文字圖片是200px寬，75px高, 那我們就用下面的css 那程式碼表現整張圖片:
h3.blogroll {
width: 200px;
height: 75px; /* 就能顯示整張圖片.
background:url(blogroll-text.jpg) 0 0 */
background:url(blogroll-text.jpg) 0 0 */
back圖片*/
text-indent: -9999px; /* 向左移動文字9999px以隱藏文字*/
}
Easier Bullet Points
無序列表選項的預設樣式也許不那麼好看。那我們就用背景圖片讓他們看起來更nicer：
ul {
list-style: none; /* 去除預設樣式. */
}
ul li {
padding-left: 40px; * 讓內容靠內，為背景顯示留出空間. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}
CSS3中的背景屬性
CSS3中有不少關於背景屬性的變化。最明顯的就是加入了多背景圖片的支持，另外還有四個新屬性，以及對現有屬性的改變。
多背景圖片
CSS3允許你為一個元素使用多於一張的背景圖片。代碼與CSS2相同，你可以用逗號分隔開幾張圖片。第一張聲明的圖片會出現在元素頂部，就像這樣：
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
新屬性1：Background Clip
這個屬性又讓我們回到了開始的問題，關於border與background屬性的問題。
background-clip 屬性讓你能控制在哪裡顯示你的背景.可能的值有：
background-clip: border-box;
background 在border 內顯示，和現在的方式一樣。 .
background-clip: padding-box;
backgrounds 在padding內顯示,而非border，跟IE6的處理方式相同。
background-clip: content-box;
backgrounds 只顯示在內容內, 而非border 或padding。
background-clip: no-clip;
預設值，和border-box相同。
新屬性2: Background Origin
這個屬性需要和background-position屬性一起使用。你可以改變background-position 的計算方式(就像background-clip一樣).
🎜 🎜🎜background-origin: border-box;🎜🎜background-position 從border開始計算。 🎜🎜background-origin: padding-box;🎜🎜background-position從padding開始計算。 🎜🎜background-origin: content-box;🎜🎜background-position從內容開始計算。 🎜想看background-clip和background-origin屬性應用的範例請看CSS3.info.
新屬性3: Background Size
background-size屬性用來重定義你的背景圖片大小。其可能值有：
background-size: contain;
縮小圖片以符合元素大小。
background-size: cover;
擴充圖片以符合元素大小。
background-size: 100px 100px;
重定義大小。
background-size: 50% 100%;
用百分比重定義。
你可以看看例子：CSS 3 specifications
新屬性4: Background Break
CSS 3中, 元素能分拆成多個部分(例如inline元素span能佔多個行)。 background-break屬性控制背景影像如何在多個部分中展示。
可能值有:
Background-break: continuous;預設值
Background-break: bounding-box;: 將兩部分之間的值加入考慮.。
Background-break: each-box;: 每個部分單獨考慮。
Background Color屬性的改變
CSS3中background-color屬性支援前景色與底色：background-color: green / blue;
就這個例子，預設顏色是這個例子，如果無法顯示用藍色。
Background Repeat屬性的改變
還記得CSS 2中圖片可能會因過界而部分消失嗎？ CSS 3 有兩個新可能值可以解決這個問題:
space: 設定重複圖片的間距。
round: 重複圖片自動調整大小以剛好填滿元素。
background-repeat: space的範例：CSS 3 specifications。
Background Attachment屬性的改變
background-attachment有個新可能值: local.。它與可滾動的元素相關(例如擁有屬性overflow: scroll;).。當background-attachment值為scroll時, 背景圖片不會隨內容滾動。現在有background-attachment:local，圖片可以隨內容一起滾動.
