Can't make child div element opaque with opacity
I am creating a popup that, when it appears, blurs the rest of the page with gray, .cover
takes care of the page overlay. However, I cannot overwrite the rule opacity:0.6;
with! Important. I want the inner one to <div>
become opaque and the parent one to be transparent.
HTML:
<div id="cover">
<div id="popup">
<img src="EFTI_POPOVER2.png" alt="endurance films institute" id="pop-img">
<button id="pop-but" onclick="location.href='http://endurancefilmsti.com/sales/'">
<span id="#but-span">
<strong>YES!</strong>
</span>SHOW ME THE FUTURE OF ENDURANCE SPORTS TRAINING</button>
<a id="back" href="#">No Thanks, Continue Shopping</a>
<a href="#" class="cancel">×</a>
</div>
</div>
CSS
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
opacity:0.6;
}
#pop-img {
opacity: 1 !important;
}
source to share
Yours .cover
should have been closed earlier. If you set the opacity to 0.6
, the child nodes will have the same opacity. Increase the #popup
z-index to get the desired result.
<div id="cover"></div>
<div id="popup">
<img src="EFTI_POPOVER2.png" alt="endurance films institute" id="pop-img">
<button id="pop-but" onclick="location.href='http://endurancefilmsti.com/sales/'">
<span id="#but-span">
<strong>YES!</strong>
</span>SHOW ME THE FUTURE OF ENDURANCE SPORTS TRAINING</button>
<a id="back" href="#">No Thanks, Continue Shopping</a>
<a href="#" class="cancel">×</a>
</div>
source to share
By spec, opacity is applied to the entire element, including all children.
Here is pseudocode. For this element with opacity <1.0
- create a bitmap buffer.
- displays the content of an element to a bitmap.
- Blend this bitmap with the destination at the specified opacity.
As you can see, the opacity is applied at the end.
source to share