Menu
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.
477
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
So how do you use RGBA? rgba (100%, 0%, 0%, 1); The fourth value denotes alpha and needs to be between 0.0 (absolute transparency) and 1.0 (absolute opacity). For example, 0.5 would be 50% opacity and 50% transparency.
The primary difference is, the opacity applies to its sub-elements too. In contrast, rgba() applies the transparency of the colour to that particular element only. For example, opacity is set to the div element that contains text and has a border.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
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.
192
Looks like a bug: Chrome composites and outputs rgb(254,254,254) while Safari outputs rgb(255,255,255). Interestingly it doesn't seem to matter what alpha value you use, Chrome always outputs the same colour. It only shows full white if you have an alpha value of 0 or 1, anything inbetween results in a subtle off-white.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
