Red bg + black field with opacity on 85 = pink text

问题

<style>
* {
    background: red;
}
.blackbalk{
    background:black;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter:alpha(opacity=85); 
    -khtml-opacity:.85; 
    -moz-opacity:.85; 
    opacity:.85; 
    width: 985px;
    margin: 0 auto;
    height:255px;
    color: white; 
}
</style>
<div class="blackbalk">Text </div>

Now my text gets pink, why? How can i get it white again?

Greetings

Edit: JS Fiddle to make it clear: http://jsfiddle.net/WFxbH/

回答1:

You can do it by instead using an rgba background on your element:

Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.

.blackbalk {
     /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.85);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}

回答2:

Thew, opacity affects the entire element and its contents, not just the background color. If you just want the background color to be 85% black, you should specifiy it with an RGBA color, like so:

.blackbalk {
    background: rgba(0, 0, 0, 0.85);
    width: 985px;
    margin: 0 auto;
    height: 255px;
    color: white;
}

回答3:

EDIT: cant over ride the cascading of opacity. Best alternative in my pinion is to use a single pixel 85% opacity black png as the background image. option 2 would be to make the inner content actually outside of the div then position it over but that's a lot finickier. You can even get the transparent png to work in IE without much trouble.

IGNORE:Not positive, as I can't test it right now but I assume the text is becoming translucent with the opacity change. Perhaps if you put your text inside a span with background-color:none and color:white; it might work it out. May have to set the spans opacity to 100% to override.

来源：https://stackoverflow.com/questions/5160419/red-bg-black-field-with-opacity-on-85-pink-text

标签

css

opacity