solid div inside transparent div?

Question

I have a navigation list (unordered list) inside of a div with an opacity of .4. The anchors inside the UL are set to opacity 1, but this has no effect.

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

Any suggestions? Thanks

Answer 1

Try it like this

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

And it's a good idea to avoid inline styles.