Apply opacity to background image but not text
opacity is not an inherit property but affect the content so when you increase the opacity of .image that also affects to .text, you can use pseudo elements and background: rgba() to achieve what you want like this:
Here a working JSFiddle to play with
.wrap {
width: 100%;
}
.image {
background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");
position: relative;
height: 100vh;
}
.image:before{
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
}
.text {
color: #FFF;
position: relative;
}<div class="wrap">
<div class="image">
<div class="text">
<p>I LOVE YOU</p>
</div>
</div>
</div>you could always apply webkit filters to make the text brighter
http://jsfiddle.net/RachGal/qxtwckts/ or the following snippet http://jsfiddle.net/RachGal/qxtwckts/1/
#wrap {
position: relative;
float: left;
background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
background-size: cover;
background-repeat: no-repeat;
opacity: 0.9;
height: 400px;
width: 400px;
}
#wrap:after {
content: '';
display: block;
position: absolute;
z-index: 2;
}
p {
font-size: 1em;
color: white;
text-align: left;
}
}<div id="wrap">
<div id="text">
<p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU
<p>
</div>
</div>opacity is applied to the entire element (including the content).
Therefore, because div.text is nested in div.image, the opacity applied to div.image applies to all descendants, as well.
With background colors you could apply the opacity directly to the property with rgba():
background-color: rgba(255, 0, 0, 0.6);
... and the problem raised in your question is avoided.
However, with background images a workaround is needed.
Options include creating a separate div for the image or using a pseudo-element.
These options and a few others are detailed here:
- Can I set an opacity only to the background image of a div?
- CSS: set background image with opacity?