CODEWITHSUNDEEP
htmlcss
user4163224
user4163224

Reputation:

Applying opacity to an image

I want to apply opacity to an image. The problem is that the opacity is also applying to the H1 text within the image. How can I apply the opacity to only the image?

HTML:

<div class="jumbotron quem-somos">
    <h1>Quem somos?</h1>
</div>

CSS:

.quem-somos {
  background-image: url('../images/capa8.png');
  opacity: 0.4;
}

The result of the above code is:

enter image description here

Upvotes: 2

Views: 121

Answers (2)

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

Opacity is applied to your container. You should put your image not in background. Try something like this:

<div class="jumbotron" style="position:relative;width:300px;">
  <img src="http://i.imgur.com/DQM3xDw.png" style="opacity:0.4;position:absolute;width:100%;" />
<h1>Quem somos?</h1>

Update: Image width now will rely to it's container width.

Upvotes: 1

Troy Gizzi
Troy Gizzi

Reputation: 2519

I believe that Drixson Oseña's answer accomplishes exactly what you want.

But if for some reason you need the image to truly be a CSS background image (e.g., you need it to repeat or something like that), then something like the following approach should work. Similar to what Drixson was doing, it uses absolute positioning to stack two elements on top of one another, with separate opacity set for each one.

div.wrapper {
  position: relative;
  width: 911px;
  height: 223px;
}
div.background {
  position: absolute;
  background-image: url('http://i.imgur.com/DQM3xDw.png');
  width: 911px;
  height: 223px;
  opacity: 0.4;
}
div.quem-somos {
  position: absolute;
  background: transparent;
}
<div class="wrapper">
  <div class="background"></div>
  <div class="jumbotron quem-somos">
    <h1>Quem somos?</h1>
  </div>
</div>

Upvotes: 2

Related Questions