身體上的多個背景

不知道這是否可能，但我可以把一個透明的圖像，在網站上的標準背景圖像。身體上的多個背景

body { 
    font-family: Arial, Helvetica, sans-serif; 
    text-align: center; 
    background: #133e6f url({{ site_img_dir }}/body-bg.gif) repeat-x; 
}

這是正常的背景圖片。我想在這個不重複的圖像上添加另一個透明的.png。如何才能做到這一點？

謝謝

來源

2013-05-08 rocco2

只是在昏迷後添加另一個網址，它應該工作。

background: url('/images/body-bg.gif'), url('/images/anotherImage.png'); 
background-repeat: repeat-x;

你可以找到更多信息here。

UPDATE

你可以找到工作的例子here, on jsfiddle。對不起，圖片，谷歌隨機GIF和PNG。

來源

2013-05-08 20:57:25 Mateusz

這對我不起作用。只有第一張圖片顯示，現在缺少＃133e6f，這也是需要的。 – rocco2 2013-05-08 21:08:52

適用於最新的Chromium。你確定png有不透明度嗎？另外，你使用的是什麼瀏覽器？ – Mateusz 2013-05-08 21:22:00

要對單個元素多背景：

.myclass { 
    background: background1, background2, ..., backgroundN; 
}

更復雜的例子：
3的背景和其他背景屬性：
注1：您可以定義background-repeat和background-position（和其他像background-size）屬性爲每個3個背景個別。

.multi_bg_example { 
    /* Background 1, an image */ background: url(img1), 
    /* Background 2, a gradient */ linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), 
    /* Background 3, an image */ url(img3); 
    background-repeat: no-repeat, no-repeat, repeat; 
    background-position: bottom right, left, right; 
}

注2：第一個出現在頂部，下方第二個，等...

來源： Mozilla開發者網絡，CSS多背景：
http://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_multiple_backgrounds

來源

2013-05-08 20:59:46 Arbel

這也不起作用，第二個圖像看起來像是在原始背景下隱藏的alwys。這樣我就不能在透明圖像上使用鏈接和絕對位置。 – rocco2 2013-05-08 21:18:12

它們按順序顯示，以適合您需求的方式更改訂單。第一個出現在上面，第二個出現在它下面...... – Arbel 2013-05-08 21:20:30

使用這個配置，我如何添加之前的背景顏色來填充背景的其餘部分？另外，如何使新的透明圖像可點擊並確保她的位置絕對等等。 – rocco2 2013-05-08 21:32:08

身體上的多個背景

回答

相關問題