2012-11-05 22 views
4

我想添加一個半透明的顏色層到一個div的背景圖像的頂部。我曾嘗試以下:沒有包裝的圖像上的透明顏色

background: url('myImage.jpg'), rgba(0,0,0,0.5); 

而且

background-image:url('myImage.jpg'); 
background-color:rgba(0,0,0,0.5); 

但在這兩種情況下,只是將圖像顯示出來。我知道我可以用這種顏色將這個div包裹在另一個div中,但是有什麼辦法可以在單個div中完成嗎?

+1

你的第一個版本似乎在Chrome中工作正常:http://jsfiddle.net/w8H8d /。但是,瀏覽器的支持仍然有點多餘:http://www.css3.info/preview/multiple-backgrounds/ – fordareh

+0

@fordareh - 實際上,支持是相當不錯的,即使IE9支持它(其中,考慮到團隊的bizzarre選擇關於支持什麼,是令人印象深刻的)。 http://caniuse.com/#feat=multibackgrounds – Shauna

+0

是的 - 我同意,這只是我沒有任何麻煩,看你的代碼在小提琴中。所以,我想你可能是在IE8中。但是,看起來你已經照顧好了。 – fordareh

回答

5

使用:after選擇器。它可以解決你的問題。

.container:after { 
    content: ""; 
    display: block; 
    width: 300px; 
    height: 200px; 
    background-color:rgba(0,0,0,0.5); 
} 

例子在這裏 - http://jsfiddle.net/ecYrS/2/

1

CSS不支持你本來想要做的 - 你需要在圖像上放置一個RGBa圖層。您基本上需要在背景圖片上放置一個半透明圖層,但CSS會在背景圖片上設置優先級,基本上會覆蓋任何背景顏色。

一個想法是你可以嘗試一個alpha透明的PNG,但我不是100%。

+0

alpha-transperent PNG音效非常好!我將這種想法留待將來,謝謝。 –

+0

只爲透明圖層提供額外請求?今天的風格太過分了,而且風格很糟糕 –

-1

你提到@Flynn面臨着同樣的問題。我想出了一個非常方便的解決方案。

雖然有一種方法!

我們可以使用漸變來代替使用rgba()或hsla()使用透明泛光顏色。漸變在技術上是背景圖像,因此不會受到堆疊順序中不能先到達(頂部)的規則的影響。

/* Working method */ 
 
.tinted-image { 
 
    background: 
 
    /* top, transparent red, faked with gradient */ 
 
    linear-gradient(
 
     rgba(255, 0, 0, 0.45), 
 
     rgba(255, 0, 0, 0.45) 
 
    ), 
 
    /* bottom, image */ 
 
    url(image.jpg); 
 
}

瞭解更多信息,請瀏覽以下鏈接:

image with background color