How can I put a transparent colored sheet over the image?

Question

There is an image that looks like :

and there is copy of this image that looks like :

How can I put a transparent-blue sheet over the image ? I tried this :

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

but it didn't work. How can I do this ?

Answer 1

I guess like this

<div class="image-holder">
    <img src="https://i.sstatic.net/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/