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:
Colorless Background Photo:
Photowithcoloredbackground
My gambiarra even worked, but wanted to learn the right way.
Just use the properties :before or :after , in case, :after would be better 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 it better, the :before and :after properties are used so that we can control a single element as if they were layers of it, before and after :after was set to absolute so that we can use the According to top,left,right e bottom , span must be set to relative, because as you know, position absolute responds to the first parent that is relativo .
So to set the :before/:after property we need to say, what content, hence the content:''; to show that the content is empty and the property is presented to the end user correctly, so I give background-color in after and I already set opacidade together with rgba(0~255,0~255,0~255,0~1) .
It is as if you created in photoshop a layer above your element, and gave it properties common to an element
If your image has transparent parts, just set background normally:
#a{background:orange}
#b{background:green}
#c{background:blue}<img id="a" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9"><imgid="b" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9"><imgid="c" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9"> In addition to the solutions you have presented, you can use the multiple backgrounds , just use linear-gradient by passing two values color 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> Your "gambiarra" worked for your test, because the image and div are the same size, try changing the image. There will be a gray square around the image. This is because you have set the properties in% cos_de% 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 div property in the image, regardless of the size of the filter: brightness(50%); 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% cos_de% property adjusts the brightness of the image. You can see the compatibility of the filters in this site .
You can set the background-color property, 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 / Transparency 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>
See more: