CSS3 цвет фона + изображение

Question

У меня есть фоновое изображение и вы хотите добавить прозрачный цвет заливки поверх этого. Я использую современные браузеры, такие как Firefox и Google Chrome.

Этот код работает (но не решает проблему)

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

Этот код не работает (но должен решить мою проблему)

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

Почему? Решение?

Answer 1

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%; 
} 
​ 

Answer 2

Вы должны сделать 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; 
}