我正在制作一个弹出窗口,当它显示时,将整个页面变成灰色模糊,.cover
负责覆盖页面。然而,我无法用 !important 来覆盖它的 opacity:0.6;
规则。我想让内部的 <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;
}
opacity
?使用background:rgba(0,0,0,0.6);
可以使#cover
的背景半透明,并且不会影响子元素。 - Hidden Hobbes