web-dev-qa-db-ja.com

rgbaの不透明な白い背景は、白い背景の上に灰色で表示されますか？

次のような白い背景の上に、divに透明な背景を追加しました。

body {
    background: white;
}

.opaque-white {
    background: rgba(255,255,255,0.95);
    height: 300px;
    width: 300px;
}

<body>

    <div class="opaque-white">
        Area with opaque (opacity: 0.95) background.
    </div>

</body>

JSFiddleリンク： http://jsfiddle.net/DvYCA/4/

しかし、何らかの理由で、divの色は白ではなく灰色で表示されます。白の上に不透明な白が表示されます...白ですよね？

それとも私は間違っていますか？

編集：問題のスクリーンショットを追加しています。これは非常に微妙な違いですが、一部の画面では目立ちます。違いを実際に理解するには、画像の左側と右側の領域を色分けしてみてください。 Difference between white and transparent-white-over-solid-white :)

csscolorsopacity
12
Spiros Martzoukos

それはあなたの画面ではありません。カラーピッカーは嘘をつきません。バグはまだChrome 38とCanary40に存在します。私のために働いたのは.opaque-whitedivにtransform: translateZ(0);を追加することでした。

8
Stelian

バグのように見えます：Chrome rgb（254,254,254）を合成して出力しますが、Safariはrgb（255,255,255）を出力します。興味深いことに、使用するアルファ値は重要ではないようです、Chromeは常に同じ色を出力します。アルファ値が0または1の場合にのみ完全な白が表示され、その間にあるものは微妙なオフホワイトになります。

1
Dre

私はこの問題に遭遇し、2つの異なるモニター間で違いが見られることを発見しました。

メインモニターでは灰色が表示されますが、セカンダリモニターでは白が表示されます。

異なる表示技術は、わずかに異なるアルゴリズムを使用して各ピクセルに何を表示するかを計算します。表示技術は、精度に影響を与える可能性のあるさまざまな方法で劣化している可能性があります。

また、視野角が効果を強調できることもわかりました http://www.techmind.org/lcd/colour.html 。

さまざまなモニターでサイト/例を表示してみてください。

0
Toni Leigh

あなたのスクリーンショットは、望ましい効果を示しているように見えます-それは私には白く見えます、そしてそれをフォトショップで開くと、片側が255,255,255で、もう一方が254,254,254で表示されます。

別のモニターで確認しましたか？解決策（またはむしろ問題）は実際にはローカルであるように見えます-おそらく画面または破損した.icmファイルです。

16進値と不透明度属性を使用してみてください。

.opaque-white {
background: #ffffff;
opacity:.95;
}

ここにフィドルがあります： http://jsfiddle.net/Gv59a/

0
Octavian