html - 不能使具有不透明属性的 div 子元素不透明

Question

我正在制作一个弹出窗口，当它出现时，将页面的其余部分模糊为灰色，.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">&times;</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;
}

Answer 1

您的.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">&times;</a>
</div>