浏览器处理CSS“透明”的渐变 [英] Browser handling of CSS “transparent” in gradients

问题描述

虽然CSS颜色 rgba（255,255,255,0）和 rgba（0,0,0,0）看起来是相同的，即 transparent ，当以纯色查看时，它们影响渐变中的中间颜色：

 线性渐变（左中心，rgba（0,0,0,0），rgba（255,255,255,1））
   
 
 
现在我的问题：
 
 
 
浏览器会自动为 transparent 选择正确颜色， 
 
 
  
 / ol> 
 
解决方案
 
 
 
 
虽然颜色模块状态， transparent 表示与 rgba 0，0，0，0），颜色在CSS渐变中表现有点不同。 图像值模块状态应该插入颜色停止预乘RGBA色彩空间。这意味着浏览器应该在颜色停止之间的过渡期间保留RGB颜色，并且灰色半透明色调不应该存在。
 
 
 
 
 2012年10月底，只有IE10和Opera正确地执行此插值，使得灰色部分不存在，并且您获得纯白色0％到100％的alpha渐变。其他浏览器会显示灰色部分，这是不正确的。
 
 
 
 
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:

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


                        
这篇关于浏览器处理CSS“透明”的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！