引子

以前做網頁布局的時候，一個div只能設置一張背景圖片，設置多個背景的話，要用多個div嵌套才能實現，這樣兼容性比較好。若您的網站要求兼容瀏覽器低版本，建議用這種方法。css3的出現，解決了一個div只能設置一個背景的問題，使一個div可以設置多個背景圖片。background-image還可以設置線性漸變，等效果。

題外話

關于css3的background，功能很強大，有很多屬性，像background-size等等，這些屬性都可以寫一篇博客來講述。關于css3background的其他屬性，后面會出博客來單獨講述！

CSS3/CSS1 background-image 屬性

語法:

取值：

說明：

設置或檢索對象的背景圖像。
如果設置了background-image，同時也建議作者設置background-color用于當背景圖像不可見時保持與文本一定的對比。
對應的腳本特性為backgroundImage。

兼容性：

IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。
IE9不支持CSS3新增參數值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作為背景圖像。
Opera11.50-11.51不支持CSS3新增參數值：< radial-gradient > |< repeating-radial-gradient >作為背景圖像。

寫法：

css3設置多張背景圖片

css3設置多張背景圖片，可以如下寫：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
                     url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
                     url("haorooms.jpg") 400px 201px no-repeat;
也可以這么寫：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;