CSS3背景顏色+圖片

我有一個背景圖像，並希望添加一個透明的填充顏色。我使用Firefox和Google Chrome等現代瀏覽器。CSS3背景顏色+圖片

此代碼的工作（但不解決問題）

background: url('bkg.jpg'), rgba(0,0,0, .5);

這個代碼不工作（但要解決我的問題）

background: rgba(0,0,0, .5), url('bkg.jpg');

爲什麼？解？

來源

2012-07-02 Jens Törnell

地方你的代碼你想要做一個透明填充顏色或你想要的形象是透明的jsfiddle – Rab

？ –

背景圖像不會透明。頂部的顏色應該是。然後背景「發光」通過顏色。 –

https://developer.mozilla.org/en/CSS/background說：

注：背景顏色只能在最後一個背景被定義，因爲只有整個元素一個背景顏色。

http://www.w3.org/TR/css3-background/#layering說：

的背景顏色，如果存在的話，被塗低於所有其他層。

http://www.w3.org/TR/css3-background/#background-color說：

此屬性設置元素的背景顏色。顏色是繪製在任何背景圖像後面。

也許你可以使用:before/:after僞元素而不是絕對定位。

http://jsfiddle.net/3mNkZ/3/

div { 
    background: rgba(0,255,0, .5); 
    width: 200px; height: 200px; 
    border: 10px solid red; 
    position: relative; 
    font-size: 100px; 
    color: white; 
} 

div:before { 
    background: url('http://placekitten.com/200/150'); 
    content: ' '; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
}

來源

2012-07-02 06:25:02 biziclop

不適合我。背景顏色在背景圖像後面。 – zendu

最終創建了2個子div--一個用於背景圖像，另一個用於背景色，如此處所述：http://stackoverflow.com/a/9730776/828062。 – zendu

有趣的是，你使用的瀏覽器是什麼？ – biziclop

你必須做出一個div，其大小爲窗口，得到的效果相同。這是jsfiddle和下面的代碼。

html{ 
    background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg'); 
} 
.color { 
    background-color: rgb(100,0,0); 
    opacity: 0.5; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

來源

2012-07-02 06:33:36

CSS3背景顏色+圖片

回答

相關問題