图层索引和不透明度问题

Posted 2023-03-06

【中文标题】图层索引和不透明度问题

【英文标题】：layer index and the opacity issue

【发布时间】：2012-02-12 03:26:18

【问题描述】：

我将外部 div 的 opacity 属性设置为 0.5， 我将内部 div 的不透明度值设置为 1 但它仍然是透明的

这里是示例代码： HTML：

<div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>

CSS：

#div1
        background: black;
        opacity:.5;
        width:300px;
        height:300px;
        
        #div2
            background:white;
            width:150px;
            height:150px;
            opacity: 1;
        
        #div3
            display: block;
            width: 50px;
            height: 50px;
            opacity: 1;
            background: black;
        

那么问题出在哪里？ 或者我有什么想念的吗？ 帮帮我！

【参考方案1】：

这是一个关于 CSS 的常见误解，您不能在父级上设置不透明度，然后阻止它影响其子级。你需要为#div1设置一个alpha颜色：

#div1
   background: rgba(0,0,0,0.5);
   width:300px;
   height:300px;

【讨论】：

谢谢，我之前真的误会了。而且 rgba 在 IE 中不起作用，所以我应该获取一个 png 文件来完成 IE？

是的，我非常喜欢半透明的 PNG，因为它们经过测试且可靠。但如果您想要更多代码灵活性，请参阅kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie

+1 链接，我认为您应该将其包含在您的答案中！！！我不敢相信我从未见过。我的回答被正式撤回！

另外，这里是基于您上面链接中的解决方案的@strangeline 的工作示例（它使用 IE8 hacks...我知道...真丢脸）：jsfiddle.net/97xLM

谢谢大家，这对于 Web 开发的新手来说要好得多！真的非常感谢你们！这些都太有用了！