透明div里面的实心div？

Question

我有一个不透明度为.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 的元素，然后创建另一个元素并将一个元素绝对放置在另一个元素上。