CSS 3 Opacity for List but not text [duplicate]

问题

This question already has answers here:

Closed 7 years ago.

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?

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/11635837/css-3-opacity-for-list-but-not-text