0

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

这是我到目前为止所得到的：

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

但它不工作！

我只是无法理解这一点。

谢谢你的帮助！

4

3 回答 3

6

当前接受的答案，它确实可以替代工作。但两者都将背景图像用于实际内容。此方法使用 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;
}

见这个小提琴。

于 2012-12-03T13:31:14.057 回答
3

使用两个 div，看这个小提琴：

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;
}
于 2012-12-03T12:40:00.093 回答
1

当前接受的答案有效，但它在语义上不正确，并且会从一些优化中受益。

您可以为此使用伪 after 元素，因此您无需为此引入额外的标记。所以标记仍然是这样的：

<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

于 2012-12-03T13:15:29.410 回答