CODEWITHSUNDEEP
csstransparency
Nrc
Nrc

Reputation: 9787

Div transparent. Text inside not transparent

Is it possible to make a div transparent but keep the text inside not transparent?

(The only solution I can imagine is to position the text outside the div and try to position it on top of the div with a z-index. But this would be very complicated as I have a very complex menu)

Here is the case simplified: http://jsfiddle.net/5Jmzh/3/

HTML:

<ul class="menu">
    <li>first</li>
    <li id="second"> second </li>
    <li>third</li>
</ul>

CSS: 

#second {
    background:red;
    opacity: 0.3;
    filter: alpha(opacity = 30); /* A lower value makes the element more transparent */
}

Upvotes: 4

Views: 4005

Answers (1)

Kyle
Kyle

Reputation: 67194

Opacity sets everything inside that div, there is no way to override it.

Use instead the rgba method of coloring backgrounds: 

#four {
    background: rgba(255, 0, 0, .3);
...
}

This uses Red, Green, Blue and alpha values (much like Photoshop) instead of hexadecimal to calculate the color and because it's a background color it doesn't affect the child elements.

http://jsfiddle.net/5Jmzh/1/

:)

Upvotes: 6

Related Questions