css - CSS3の背景色+画像

Question

背景画像があり、その上に透明な塗りつぶし色を追加したいと思います。FirefoxやGoogleChromeなどの最新のブラウザを使用しています。

このコードは機能します（ただし、問題は解決しません）

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によると：

注：要素全体の背景色は1つしかないため、background-colorは最後の背景でのみ定義できます。

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

</ p>