css - 透明div内的实心div？

Question

我在不透明度为 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>

有什么建议么？谢谢

Answer 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>

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

Answer 2

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

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