我正在制作一个弹出窗口,当它出现时,将页面的其余部分模糊为灰色,.cover
正在处理页面覆盖。但是,我无法覆盖它的 opacity:0.6;
用 !important 规则。我要里面的<div>
变得不透明,父级变得透明。
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;
}
最佳答案
您的.cover
之前必须关闭。如果将不透明度设置为 0.6
,则子节点将具有相同的不透明度。增加 #popup
z-index 以获得您想要的结果。
<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>
关于html - 不能使具有不透明属性的 div 子元素不透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26955472/