html - 如何在 CSS 中将图像与纯色混合？

Question

我想使用 CSS 将图像与纯色混合。如何做到这一点？

这是我目前所得到的:

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

虽然它不起作用!

我只是无法理解这一点。

感谢您的帮助!

Answer 1

当前接受的答案及其替代方案确实有效。但两者都使用背景图像作为实际内容。此方法使用 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 .