2012-10-11 206 views
0

有點奇怪的請求,但我想知道是否有可能設置應用於div的背景圖像的背景顏色?我知道你可以設置<img />的背景顏色。你可以設置背景圖像CSS的背景顏色嗎?

我已經試過:

background: #FFFFFF url(image.png) no-repeat bottom center;

剛剛改變了圖像應用到div的顏色。

感謝所有

*編輯任何幫助,添加圖像更好地說明問題:

enter image description here

在這個右手導航最後莢有應用背景圖像/陰影,我理想情況下,希望給這個陰影背景色,以便它與頁面背景融合,而不是像包含div一樣的白色。

+0

你能解釋一下你想用一個例子來實現嗎? – Simone

+0

所以你希望背景顏色不要大於你的背景圖像,而不是填滿整個空間?如果是這樣的話,那麼答案是否定的:(你可以在你的容器內使用另一個div,與你的圖像完全一樣大) – Caelea

+0

@Caelea多數民衆贊成它就是這樣,我想我會嘗試你的建議 – dtsg

回答

0

如果這些填充剩下的都是單個圖像(通常認爲在圖像中有內容文本是不好的做法,btw),那麼我建議使用圖像編輯器使塊之間的空間透明(不要忘記包含陰影,所以它們在正確的顏色上有alpha透明度,而不是白色)。這將允許HTML元素的背景顏色顯示。

也就是說,我會親自將這些塊轉換爲常規文本和HTML塊(因此唯一的圖像是每個圖像右側的裝飾圖像),您可以使用box-shadow輕鬆添加陰影。

box-shadow屬性本質上是透明的,而不是影子本身的位置。這意味着它的「背景」將永遠是它背後的內容(在簡單情況下,這將是包含元素的背景,儘管它也可以是文本或圖像,如果box-shadow的元素位於其上)。

看看我的jsFiddle,看看我在說什麼(這是一個快速的,所以它看起來不像你要去的效果,但這種效果是可能的一點創意):http://jsfiddle.net/DXrk6/1/

0

使用

background: #FFFFFF url(image.png) no-repeat bottom center;

它會填滿元素(DIV,...)與image.png的背景和顏色#FFFFFF