I'm trying to apply the opacity to my background image. I've tried using rgba, and the pseudo-class after. Is there any other way to apply this filter only to the image without affecting the content?
This is HTML
<div id="banner" style="background-image: url(wp-content/themes/enepe/images/bg_header.jpg);">
And CSS
#banner{
width: 100%;
background-repeat: no-repeat;
background-size: cover;}
There are some CSS properties that when applied to "parent elements", the "child elements" inherit the characteristic applied to the parent. This was being your case . Read more
The CSS property opacity specifies the transparency of an element, that is, the degree to which the background behind the element is superimposed
Using opacity: .4;
.banner {
position: relative;
z-index: 5;
height: 300px;
width: 300px;
color: #000;
font-size: 400%;
padding: 20px;
}
.banner .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://kithomepage.com/images/Imagem005.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
} <div class="banner">
<div class="bg"></div>
Eu Não estou opacitado? :)
</div>Try this:
#banner {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#banner:after{
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(wp-content/themes/enepe/images/bg_header.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
This solution that the friend posted is almost correct. I made some crossbrowser changes and included some necessary properties. I left a live example below. I hope I have helped.
** jsFiddle live preview
#banner {
width: 100%;
height: 100vh;
position: relative;
}
#banner:after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
background: url(http://www.jj.com.br/galerias/noticias/1000/codigo_0021653/2015-10-10_13-38-03_1.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}<div id="banner">
<h3>See how the text is not transparent.</h3>
</div>Using RGBA, I always use it this way: D
.img{
background: url('https://static.omelete.uol.com.br/media/extras/conteudos/01-Spoilers_fcaRwD9_4VjGalG.jpg') no-repeat center;
background-size: cover;
height: 300px;
position: relative;
}
.opac{
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.5)
}
.opac h1{
color: #FFF
}<div class="img">
<div class="opac">
<h1>CONTEUDO</h1>
</div>
</div>