Question

我制作了一个弹出窗口，当显示时，以灰色模糊页面的其余部分，.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">&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>

Answer 2

根据规范，不透明度应用于包括所有孩子的整个元素。

这是伪代码。对于具有不透明度＆lt; 1.0

创建位图缓冲区。
将元素的内容呈现给位图。
使用给定的不透明度将该位图混合到目标位置。

正如您可能会看到最后应用不透明度。

无法使用opacity属性使div子项不透明

2 个答案: