不透明度85の赤いbg +黒色のフィールド=ピンクのテキスト

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> 

なぜ私のテキストはピンクになるのですか？ どうすればもう白くできますか？

挨拶

編集：JSフィドルはそれを明確にする：http://jsfiddle.net/WFxbH/

Answer 1

があなたの代わりにあなたの要素にrgba背景を使用することによってそれを行うことができますLive Demo - これは"in every browser you care about"で動作し、jsFiddleにはそのブラウザでも動作するように、推奨されるIE conditional commentが含まれています。

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

Answer 2

EDIT：カントを超える不透明度のカスケードに乗ります。私のピニオンのベストな選択肢は、背景画像として単一のピクセル85％の不透明度の黒色のpngを使用することです。オプション2は、内部のコンテンツを実際にdivの外に置いてそれを上に置くことですが、それはずっと厄介です。透明なPNGをIEでうまく動作させることさえできます。

IGNORE：私は今テストすることができないので、肯定的ではありませんが、テキストが不透明度の変更で半透明になっていると仮定します。おそらく、background-color：noneとcolor：whiteのスパンの内側にテキストを置くと、それがうまくいくかもしれない。オーバーライドするには、スパンの不透明度を100％に設定する必要があります。

Answer 3

不透明度は、背景色だけでなく、要素とその内容全体に影響します。あなただけの85％黒に背景色をしたい場合は、そのように、RGBA色でそれをspecifiyする必要があります

：

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