Johnny Johnny - 6 months ago 15
HTML Question

Parent's transparent background is making child images transparent

I have set my main background to transparent, I am placing an image on top of the background it is inheriting the opacity 0.4, I don't want that. I want it to be 100%. I even tried

opacity 1.0
didn't work here is my code:

HTML:

<!-- Background -->
<img src="img/bg.jpg" id="bg" alt="">

<!-- The image -->
<div class = "row">
<div class = "logo">

<img src="img/logo.png" width="100%" height="141" id="logo" alt="Title" />
</div>
</div>


CSS:

//Background
#bg {
position: fixed;
top: 0;
left: 0;
opacity: 0.4;

width: 100%;
min-height: 100%;
}

//the image
#logo {
opacity : 1.0;!important;
}

Answer

It turns out that the opacity channel is inherited

try using the rgba property instead:

background-color: rgba(0, 0, 0, 1); /* red, gree, blue, alpha (opacity) */

Credit: answer adapted from this one

#bg {
  z-index: -1000;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.4;
  width: 100%;
  min-height: 100%;
}

.logo,
#logo {
  background-color: rgba(0, 0, 0, 1);
  padding:0;
  margin: 0;
}
<!-- Background -->
<img src="http://lorempixel.com/400/400" id="bg" alt="">

<!-- The image -->
<div class="row">
  <div class="logo">
    <img src="http://lorempixel.com/300/150" width="100%" height="150" id="logo" alt="Title" />
  </div>
</div>

Comments