如何在图像上放置透明的彩色纸？

Question

图片看起来像：

并且此图像的副本如下所示：

如何在图像上放置透明蓝色的纸张？我试过这个：

<img src="bg2.jpg" style="background-color:rgba(34,70,118,0.7);" /> 

但它不起作用。我怎么能这样做？

Answer 1

我想这就是

<div class="image-holder">
    <img src="http://i.stack.imgur.com/vqpYb.jpg">
    <div class="overlay"></div>
</div>

.image-holder {
    position: relative;
    float: left;
}
.overlay { 
    background-color:rgba(34,70,118,0.7);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
}

http://jsfiddle.net/84L1cvmw/

Answer 2

最简单的方法：

• 背景div.image-holder。

• <img>上的不透明度降低。

display: block上的

• <img>可消除差距（<img>的默认显示为display: inline-block）。

您还可以轻松转换悬停并将不透明度增加到正常值。

Have an example!

HTML

<div class="image-holder">
    <img src="http://i.stack.imgur.com/vqpYb.jpg" />
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.image-holder {
    background: blue;
    float: left;
}
.image-holder img {
    opacity: 0.5;
    display: block;
    transition: opacity 0.6s;
    cursor: pointer;
}
.image-holder img:hover {
    opacity: 1;
}