Browser handling of CSS “transparent” in gradients
Although the CSS colors rgba(255,255,255,0)
and rgba(0,0,0,0)
are apparently the same, i.e. transparent
, when being looked at as plain colors, they affect the intermediate colors in gradients:
linear-gradient(left center, rgba(0,0,0,0), rgba(255,255,255,1))
This yields grey semitransparent tones between the two ends开发者_Go百科.
Now my questions:
Do browsers select the “right” color for
transparent
automatically or is it a fixed color (most likely “black transparent” or “white transparent”)?Is this different between browsers?
Although the Color module states that
transparent
means the same asrgba(0, 0, 0, 0)
, colors behave a little differently in CSS gradients. The Image Values module states that color stops should be interpolated in a premultiplied RGBA color space. This means that browsers are supposed to preserve the RGB colors during transitions between color-stops, and that the grey semitransparent tones shouldn't be there.As of the end of October 2012, only IE10 and Opera perform this interpolation correctly, such that the grey portions aren't present and that you get a pure white 0%-to-100% alpha gradient. Other browsers display the grey portions, which is incorrect.
精彩评论