1

Possible Duplicate:
Opacity of background, but not the text

I have a HTML unordered list. I need the background to have an opacity of "0.3". But I don't want this opacity applied to the text. Here is my current CSS; it renders the text as having an opacity of 0.3 as well:

li {
    background-color:pink;
    opacity: 0.3;
}

a {
    color: white;
    opacity: 1.0;
}

How do make the link text render white?

Community
  • 1
  • 1
Sam
  • 5,150
  • 4
  • 30
  • 51

2 Answers2

4

You'll have to use another way to set your color like rgba like this:

li { background-color: rgba(0,0,0,.3); }

You also need to get rid of the opacity property/value. BTW, the rgb values for the css pink color are: 250,192,203, so: rgba(250,192,203,.3);

rafaelbiten
  • 6,074
  • 2
  • 31
  • 36
0

This is what you need my friend!

http://www.css3.info/introduction-opacity-rgba/

You can't use opacity like that...it gets inherited and has been very annoying to developers for years gone by.

Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140