透明div内的实心div？答案

【问题标题】：solid div inside transparent div?透明div内的实心div？
【发布时间】：2013-04-05 11:59:48
【问题描述】：

我在不透明度为 0.4 的 div 中有一个导航列表（无序列表）。 UL 内的锚点设置为不透明度 1，但这没有效果。

<div style="background-color: #000; opacity: 0.4">
    <ul>
        <li><a href=".." style="background-color: #000; opacity: 1">home</a></li>
    </ul>
</div>

有什么建议吗？谢谢

【问题讨论】：

重复，其中包括：Nontransparent child in transparent parent 和 Set opacity of background image without affecting child elements。叹息，我可能已经投票结束，因为重复了错误的问题，我意思是这个：how to not apply opacity for child element。

标签： css opacity

【解决方案1】：

这样试试

<div style="background-color: rgba(0, 0, 0, .4);">
    <ul>
        <li><a href=".." style="background-color: rgba(0, 0, 0, 1);">home</a></li>
    </ul>
</div>

避免内联样式是个好主意。

【讨论】：

我同意。为了简单起见，我只是使用内联来提出问题......感谢您的回答。现在试试。
你能推荐一些关于 rgba 的文档吗？这个解决方案是跨浏览器吗？我在几个地方看到过这种情况，但没有经验。感谢您的建议！
没什么特别的 - 只是一个带有附加参数的常规 RGB，即不透明度。关于浏览器兼容性 - caniuse.com/#search=rgba

【解决方案2】：

不透明度被继承，所以当你应用不透明度时：1;对于子元素，它是根据不透明度计算的：0.4；它的父母。

为了克服这个问题 - 如果你不能使用 rgba - 创建一个包装元素，在其中创建你的 0.4 opacity 元素，然后创建另一个并将一个绝对定位在另一个上。

【讨论】：