- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 28 Jun 2011 10:10:09 +1000
- To: fantasai <fantasai.lists@inkedblade.net>
- CC: www-style@w3.org, Tantek Çelik <tantek@cs.stanford.edu>
On 28/06/2011 3:46 AM, fantasai wrote:
> On 01/12/2011 12:26 PM, Tab Atkins Jr. wrote:
>>
>> What you're seeing is the fact that transitions from opaque colors to
>> transparent in non-premultiplied space get darker as they progress.
>> Try doing a transition from opaque white to transparent over a white
>> background, and you'll see it very clearly - you'll get an image that
>> starts white, darkens to gray, and then lightens to white again.
>
> Is there a way to avoid things like this? It seems to me that having
> 'transparent' mean 'transparent black' means you almost never get what
> you want, which is the opacity fading without the color itself changing.
> I think that's a common enough use case that it should be easy to do.
It is easy to do. You can simply change the alpha component.
For a color close to purple.
<!doctype html>
<style type="text/css">
body { background: white }
div {
height: 100px;
background: -webkit-linear-gradient(left, rgb(112, 0, 112), rgba(112,
0, 112, 0));
background: -moz-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0,
112, 0));
background: -ms-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0,
112, 0));
background: -o-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0,
112, 0));
}
</style>
<div></div>
For white, you transition it to 'transparent white'.
linear-gradient(white, rgba(255, 255, 255, 0))
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Tuesday, 28 June 2011 00:10:38 UTC