帶2張圖片的HTML背景

我有一幅50px寬和340px高的圖片。圖片應該重複到左側，但不能向下。然後我在頁面頂部有這張照片的連勝。而其餘的頁面（下）應該是另一張圖片。帶2張圖片的HTML背景

這裏是我的發言：

background: url("images/bg.png") repeat-x scroll left top #2C9E2E;

但現在我想最後一塊改變#2C9E2到url("images/bg-body.gif")，但它不會工作。

我嘗試這樣做的代碼：

body{ 
    background: url("images/bg.png") repeat-x scroll left top url("images/bg-body.gif"); 
}

來源

2015-02-23 Skeptar

您應該發佈您嘗試的代碼。你是如何嘗試替換它的？告訴我們你的代碼。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds – Huangism 2015-02-23 22:02:20

background爲多個聲明的簡寫，並且url("images/bg.png")和#2C9E2E件分別指定background-image和background-color。

要顯示多個分層背景，您需要用逗號分隔多個聲明（background: <top background>, <bottom background>）。此外，顏色聲明只能出現在最後一個背景圖層上。

所以，如果你想bg.png對BG-body.png的頂部出現既背後平坦的顏色，你可以使用：

background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;

根據需要第二後臺添加附加屬性（例如重複/滾動/位置），並且如果您不希望在兩個圖像背後都去掉顏色值。

另請注意，IE8不支持多種背景（http://caniuse.com/#feat=multibackgrounds）。如果您需要支持IE8或更高版本，則需要指定單個背景回退。

background: url("images/bg.png") repeat-x scroll left top #2C9E2E; 
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;

來源

2015-02-23 22:09:29 gapple

感謝您的答案。它工作完美！ :) – Skeptar 2015-02-23 22:58:52

帶2張圖片的HTML背景

回答

相關問題