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

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/