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

Question

<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/

lupos · Answer 1 · 2011-03-01T21:40:57.843

1

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.

edited Mar 01 '11 at 21:40

answered Mar 01 '11 at 21:17

lupos

374
1
9

Oh, misunderstood the original intent. Though I still thing nesting the text with it's own opacity variable would probably fix the issue. – lupos Mar 01 '11 at 21:19
thirtydots' answer actually looks great. I just learned something new. – lupos Mar 01 '11 at 21:43

score 1 · Answer 2 · answered Mar 01 '11 at 21:35

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

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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

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

3 Answers3

Linked