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;
}
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments