How to put a colored layer over an image?

Question

div {
  background: #000;
  width: 640px;
  height: 640px;
  opacity: 0.2;
  position: absolute;
  z-index: 99;
}

<span>
  <div></div>
  <img src="https://scontent.cdninstagram.com/t51.2885-15/e15/11909170_999395153465997_38853384_n.jpg?ig_cache_key=MTA1NTI1MTUxNDA0OTkxNDkyMg%3D%3D.2" alt="">
</span>

Illustration:

Photo without colorful background:

Photo with colorful background

My gambit worked, but I wanted to learn the right way.

Answer 1

In addition to the solutions they presented, you can use the multiples backgrounds, just use linear-gradient passing two color values rgba next to the image url:

div {
  height: 262px;
  width: 389px;
  background:
    linear-gradient(
      rgba(0,0,0,.3),rgba(0,0,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat;
}

<div></div>

Another example:

div {
  height: 262px;
  width: 389px
}

div.red {
  background:
    linear-gradient(
      rgba(255,0,0,.3),rgba(255,0,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
} 

div.green {
  background:
    linear-gradient(
      rgba(0,255,0,.3),rgba(0,255,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
}

div.blue {
  background:
    linear-gradient(
      rgba(0,0,255,.4),rgba(0,0,255,.4)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
}

<div class='red'></div>
<div class='green'></div>
<div class='blue'></div>

Answer 2

If your image has transparent parts just set the background normally:

#a{background:orange}
#b{background:green}
#c{background:blue}

<img id="a" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">
<img id="b" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">
<img id="c" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">

Answer 3

Your "gambiarra" worked for your test, because the image and the div are in the same size, try changing image. It will get a gray square around the image. That’s because you set the property in the div that the image is and not in the image itself. See:

div {
  background: #000;
  width: 640px;
  height: 640px;
  opacity: 0.2;
  position: absolute;
  z-index: 99;
}

<span>
  <div></div>
  <img src="https://i.stack.imgur.com/0VvBr.jpg" alt="">
</span>

This works, if the image is the same size. Now see if you put the property filter: brightness(50%); image, regardless of the size of the div it will work with the effect you want. See:

img {
    filter: brightness(50%);
}

<span>
  <div></div>
  <img src="https://i.stack.imgur.com/0VvBr.jpg" alt="">
</span>

The estate brightness adjusts the image brightness. You can see the compatibility of filters in this website.

Answer 4

Just use the properties :before or :after, in case, it would be better to :after for example, your code would look like this:

CSS

span{
        position:relative;
    }
    div{
        width: 640px;
        height: 640px;
        opacity: 1;
        position: absolute;
    }
    div:after{
        content:'';
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color:rgba(0,0,0,.6);
    }
    div img{
        width:100%;
    }

HTML

<span>
  <div>
     <img src="https://scontent.cdninstagram.com/t51.2885-15/e15/11909170_999395153465997_38853384_n.jpg?ig_cache_key=MTA1NTI1MTUxNDA0OTkxNDkyMg%3D%3D.2" alt="">
  </div>
</span>

Now, to explain better, the properties :before and :after serve so that we can control a single element as if they were layers of it, before and after, :after was set as absolute so that we could use the position according to top,left,right e bottom, the span has to be set as relative, because as you know, position absolute responds to the first parent who goes relativo. Then to set the property :before/:after we need to say, what is the content, hence the content:''; to show that the content is empty and the property is presented to the end user in the correct way, so I give a background-color in the after, and already put the opacidade along with the rgba(0~255,0~255,0~255,0~1).

It’s like I photoshopped a layer above its element, and gave it properties common to an element

Answer 5

You can set the property of background-color, but it will make a difference if the image does not overlap the entire background area:

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body {  
                background-image: url("img_tree.gif"), url("img_flwr.gif");
                background-color: #dddddd;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
        </style>
    </head>
    <body>

    </body>
</html>

A better solution would be to use the Opacity/Transparence property:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                opacity: 0.5;
                filter: alpha(opacity=50); /* For IE8 and earlier */
            }
        </style>
    </head>
    <body>

        <h1>Image Transparency</h1>
        <p>The opacity property specifies the transparency of an element. The lower  the value, the more transparent:</p>

        <p>Image with 50% opacity:</p>
        <img src="img_forest.jpg" alt="Forest" width="170" height="100">

    </body>
</html>

Consult more:

• CSS Opacity/Transparency

• CSS Backgrounds