无法使用不透明度属性使div子元素不透明

Question

无法使用不透明度属性使div子元素不透明

3

我正在制作一个弹出窗口，当它显示时，将整个页面变成灰色模糊，.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;
}

- user3949359

3

无法与包裹 div 一起使用，div 中的任何内容都无法覆盖其不透明度.. 您需要将遮罩层置于其下方。 - webkit

所以，我交换了它们的位置并提高了图像的z-index，但它仍然被覆盖在覆盖层下面。 - user3949359

3

你是否需要使用 opacity？使用 background:rgba(0,0,0,0.6); 可以使 #cover 的背景半透明，并且不会影响子元素。 - Hidden Hobbes

已经完成了，它能够胜任。 - user3949359

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- William Kennedy · 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>

- c-smile · Answer 2

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

这里是伪代码。对于不透明度小于1.0的元素

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

正如您所看到的，不透明度是在最后应用的。