如何在CSS中將圖像與純色混合？

Question

我想使用CSS將圖像與純色混合。如何才能做到這一點？

這是我到目前爲止有：

header { 
    width: 900px; 
    height: 60px; 
    background-image: url(../images/banner.jpg); 
    background-color: rgba(51,102,153,0.5); 
} 

它不工作雖然！

我只是無法得到我的頭。

感謝您的幫助！

Answer 1

使用兩個div，見this fiddle：

HTML：

<div id="wrapper"> 
    <div id="content"></div> 
</div> 

CSS：

#wrapper 
{ 
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat; 
} 

#content 
{ 
    background-color: yellow; 
    opacity: 0.5; 
    width: 477px; 
    height: 318px; 
} 

Answer 2

目前公認的答案的作品，但它的語義上不正確，並會從一些優化技術中受益。

你可以使用這個僞後元素，所以你不需要爲此引入額外的標記。所以標記仍然是這樣的：

<div id="content"></div> 

CSS是冗長的，但更具表現力。我不喜歡「包裝器」包含實際內容（圖片），而「內容」只是一個簡單的顏色。也不需要淡入整個div，但是您可以使用alpha通道作爲顏色。

#content { 
    position: relative; 
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat; 
    width: 477px; 
    height: 318px; 
} 
#content:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255,0,0,0.5); 
    pointer-events: none; 
} 

​jsfiddle

Answer 3

目前公認的答案，它的替代確實工作。但兩者都使用背景圖像來表示實際內容。該方法使用img標籤。

HTML

<div class="blend"> 
<img src="http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg" alt=" " /> 
</div>​ 

CSS

.blend { 
    background: red; 
    display: inline-block; 
} 

.blend img { 
    opacity: 0.5; 
} 

看到這個fiddle。