Apply opacity to background image but not text

Question

My problem is that when I take a picture darker, the text in the class .textgets darker and I don’t know how to avoid it.

I know one solution: make .wrap position:absoluteand class .textnot in image, but this solution is not suitable for me (for example this ).

Any other ideas?

This is the code I have:

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  opacity: 0.8;
  height: 100vh;
  max-height: 350px;
  min-height: 200px;
}
.text {
  color: #FFF;
  font-weight: 900;
}

<div class="wrap">
  <div class="image">
    <div class="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>
</div>

Run codeHide result

jsfiddle demo

Answer 1

opacity inherit, , , .image, .text, background: rgba() , :

JSFiddle,

.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>

Hide result

Answer 2

opacity ( ).

, div.text div.image, opacity, div.image, .

rgba():

background-color: rgba(255, 0, 0, 0.6);

... , , .

.

div .

:

• div?
• CSS: ?

Answer 3

you can always apply webkit filters to make 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>

Run codeHide result