Apply opacity to background image but not text

Question

My problem is when I make my picture darker the text in class .text gets darker too, and I don't know how to avoid this.

I know one solution: to make .wrap position:absolute and class .text make not in image but this solution is unsuitable for me (like this).

Any other ideas?

This is the code that 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>

jsfiddle demo

Yandy_Viera · Accepted Answer · 2015-09-10T00:30:30.023

25

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>

edited Sep 10 '15 at 00:30

answered Sep 10 '15 at 00:10

Yandy_Viera

4,320
4
21
42

I was testing that. Will that work with images? I thought only background colors. – Michael Benjamin Sep 10 '15 at 00:16
1

Yes that only work with bg color but notice that the OP is trying to set opacity to the img to dark it with the black bg of `.wrap` so you can set a layer (pseudo element) over the img with a semitransparent bg and obtain the same result. – Yandy_Viera Sep 10 '15 at 00:20
Worked perfekt! For real photos I added to .image: background-size: cover; background-repeat: no-repeat; This will fir the image into the while container instead of repeating a pattern – Marco Sep 08 '19 at 09:30

score 4 · Answer 2 · edited May 23 '17 at 11:54

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:

Rachel Gallen · Answer 3 · 2015-09-10T00:20:06.677

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>

I don't want to make it brighter , just normal color `FFF` but with darker background, but thx for answer — Qwe, Sep 10 '15 at 00:09

score 1 · Answer 4 · answered Mar 05 '20 at 06:06

opacity is applied to the entire div rather fade the image instead of div using linear-gradient()

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  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>

score 1 · Answer 5 · edited Apr 28 '20 at 08:43

1

<div class="background-image">
   <div id="text-color">
      Hello!!
   </div>
</div>

.background-image {
  background-image: url(image.jpg);
  background-size:cover;
  background-position:center;
  color:#fff;
  background-repeat: no-repeat;
}

.text-color { 
 background-color: rgba(255, 0, 0, 0.6);
}

edited Apr 28 '20 at 08:43

David Buck

3,752
35
31
35

answered Apr 28 '20 at 07:57

Jose Hatikva

11
1

Apply opacity to background image but not text

5 Answers5