Opaque white background with rgba displays grey over white background?

css colors opacity
Spiros Martzoukos picture Spiros Martzoukos · Nov 14, 2013 · Viewed 17.1k times · Source

I added a transparent background on a div, over a white background with like that:

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 link: http://jsfiddle.net/DvYCA/4/

but for some reason the color of the div shows grey instead of white. Opaque white over white should display...white, right?

Or am I mistaken?

EDIT: I'm adding a screenshot of the problem. It's a very subtle difference, yet noticeable in some screens. To actually understand the difference, try color picking the left side of the image, with the right area. Difference between white and transparent-white-over-solid-white :)

Answer

Stelian picture Stelian · Oct 14, 2014

It's not your screen. The color picker does not lie. I see the bug is still present in Chrome 38 and Canary 40. The thing that worked for me was to add transform: translateZ(0); to the .opaque-white div.

Related questions

Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More