CSS3中包含幾個(gè)新的背景屬性，提供更大背景元素控制。

一、瀏覽器支持

表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。

數(shù)字后面的 －webkit－ 或者 －moz－ 使用時(shí)需要指定前綴。

屬性ChromeFirefoxSafariOperaIEbackground－image （多背景）4．09．03．63．111．5background－size4．0 1．0 －webkit－9．04．0 3．6 －moz－4．1 3．0 －webkit－10．5 10．0background－origin1．09．04．03．010．5background－clip4．09．04．03．010．5二、CSS3 多背景

CSS3允許你為一個(gè)元素添加多個(gè)背景圖像， 通過使用 background－image 屬性．不同的背景圖像用逗號(hào)隔開，圖像疊加在一起，

例：有兩個(gè)背景圖像，第一圖像是背景圖（在右下角）和第二圖像是一個(gè)GIF動(dòng)圖（在左上角）。

代碼如下：

＜！DOCTYPE HTML＞＜meta charset＝＂utf－8＂＞＜title＞項(xiàng)目＜／title＞＜head＞＜style＞ ＃example1 ｛
background－image： url（img／fy＿indexBg．jpg）， url（img／17I＿h(yuǎn)d．mp4．gif）； background－position： right bottom， left top； background－repeat： no－repeat， repeat；｝＜／style＞＜／head＞＜html＞
＜body＞ ＜div id＝＂example1＂＞ ＜h1＞Lorem Ipsum Dolor＜／h1＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞＜／body＞
＜／html＞

可以使用單獨(dú)的背景屬性（如上所示）或背景簡寫屬性指定多個(gè)背景圖像。

下面的例子使用了背景速記

（上面的例子，有相同的結(jié)果）

＃example1 ｛ background： url（img＿flwr．gif） right bottom no－repeat， url（paper．gif） left top repeat；｝1． CSS3 背景尺寸

CSS3 background－size 屬性允許你指定背景圖像的尺寸．

在CSS3之前的背景圖像大小是圖像的實(shí)際大小。CSS3允許我們使用背景圖像在不同的上下文中。

size可以指定長度、百分比，或通過使用一個(gè)關(guān)鍵詞： contain 或者 cover．

示例：圖片背景圖像比原圖像小得多（以像素為單位）：

代碼如下：

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項(xiàng)目＜／title＞ ＜style＞ ＃example1 ｛ border： 1px solid black； background：url（img＿flwr．gif）； background－repeat： no－repeat； padding：15px； ｝
＃example2 ｛ border： 1px solid black； background：url（img＿flwr．gif）； background－size： 100px 80px； background－repeat： no－repeat； padding：15px； ｝＜／style＞＜／head＞＜body＞
＜p＞原背景：＜／p＞ ＜div id＝＂example1＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜p＞縮放背景圖：＜／p＞ ＜div id＝＂example2＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜／body＞＜／html＞

background－size 屬性兩個(gè)可能值是：contain 和 cover．

含有關(guān)鍵詞尺度的背景圖像盡可能大的（但它的寬度和高度必須在內(nèi)容區(qū)域）。因此，根據(jù)背景圖像的比例和背景區(qū)的定位，有可能不被背景圖像覆蓋。

cover 關(guān)鍵詞縮放背景圖像，內(nèi)容區(qū)域完全覆蓋了背景圖像（它的寬度和高度等于或超過該范圍的內(nèi)容）。因此，背景圖像的某些部分可能不在背景區(qū)的定位是可見的。

下面的示例演示了使用contain和cover：

＃div1 ｛ background： url（img＿flower．jpg）； background－size： contain； background－repeat： no－repeat；｝＃div2 ｛ background： url（img＿flower．jpg）； background－size： cover； background－repeat： no－repeat；｝

2． 定義多個(gè)尺寸的背景圖像

background－size 屬性也接受多個(gè)背景值（使用逗號(hào)分隔列表），當(dāng)處理多個(gè)背景時(shí)。

下面的示例指定三個(gè)背景圖像，每個(gè)圖像具有不同的background－size值：

＜！DOCTYPE html＞＜html lang＝＂en＂＞
＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項(xiàng)目＜／title＞ ＜style＞ ＃example1 ｛ background： url（img／fy＿indexBg．jpg） left top no－repeat， url（img／fy＿indexBg．jpg） right bottom no－repeat， url（img／17I＿h(yuǎn)d．mp4．gif） left top repeat； padding： 15px； background－size： 50px， 130px， auto； color： white； ｝＜／style＞ ＜／head＞
＜body＞
＜div id＝＂example1＂＞ ＜h1＞Lorem Ipsum Dolor＜／h1＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜／body＞
＜／html＞

3． 全尺寸的背景圖片

如果希望在一個(gè)覆蓋整個(gè)瀏覽器窗口的網(wǎng)站上有一個(gè)背景圖像。．

要求如下：

填滿整個(gè)頁面的圖像（沒有空白）

縮放圖像

圖像居中頁面

沒有滾動(dòng)條

下面的示例演示如何使用HTML元素（HTML元素始終是瀏覽器窗口的高度）。然后設(shè)置一個(gè)固定中心的背景上。然后用background－size屬性調(diào)整它的大?。?/p>

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項(xiàng)目＜／title＞ ＜style＞ html ｛ background： url（img／fy＿indexBg．jpg） no－repeat center fixed； background－size： cover； ｝＜／style＞＜／head＞＜body＞
＜h1＞整個(gè)頁面背景圖＜／h1＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat． Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞
＜／body＞＜／html＞