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

Duplicate of, among others: [Nontransparent child in transparent parent](http://stackoverflow.com/questions/3031848/nontransparent-child-in-transparent-parent) and [Set opacity of background image without affecting child elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements). Sigh, I may have voted to close as a duplicate of the wrong question, I *meant* this one: [how to not apply opacity for child element](http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element). — David Thomas, Apr 12 '13 at 20:20

score 20 · Accepted Answer · answered Apr 12 '13 at 20:19

20

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.

answered Apr 12 '13 at 20:19

Zoltan Toth

46,981
12
120
134

I agree. I just used the inline for the sake for simplicity in posing the question... thanks for answer. Trying now. – aserwin Apr 12 '13 at 20:20
Can you recommend some documentation on rgba? Is this solution cross browser? I have seen this in a few places but have no experience with it. Thanks for the advice! – aserwin Apr 12 '13 at 20:33
1

nothing special about it - just a regular RGB with an additional parameter, which is the opacity. About the browser compatibility - http://caniuse.com/#search=rgba – Zoltan Toth Apr 12 '13 at 20:35

score 5 · Answer 2 · answered Apr 12 '13 at 20:20

The opacity gets inherited, so when you apply opacity: 1; to a child element, it is calculated from the opacity: 0.4; of it's parent.

To overcome this problem - in case you cannot use rgba -, create a wrapper element, inside of which you create your 0.4 opacity element, then create another one and absolutely position one on the other.

solid div inside transparent div?

2 Answers2