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.

Now my questions:

1. Do browsers select the “right” color for transparent automatically or is it a fixed color (most likely “black transparent” or “white transparent”)?

2. Is this different between browsers?

回答1:

1. Although the Color module states that transparent means the same as rgba(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.

2. 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.

来源：https://stackoverflow.com/questions/7241991/browser-handling-of-css-transparent-in-gradients