CSS3渐变渲染问题从透明到白色

Question

我遇到了CSS3渐变的跨浏览器渲染问题.当我尝试创建从透明颜色到白色的渐变时,会发生这种情况.

我用来测试的文件是:http: //f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用的CSS是:

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

在Safari 6(mac)中,Rending看起来像我想要的:

Chrome渲染在渐变为白色之前淡化为灰色(Firefox在mac os上也呈现这种方式):

关于为什么这个奇怪的渲染可能是什么想法或建议？

Answer 1

我也遇到过这种情况.我不确定它为什么会发生,但这是我在自己的项目中用作解决方法的方法:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

而不是给Chrome一个"透明"的价值,给它一些非常非常接近透明的东西.希望这可以帮助!

编辑:我忘了发布一个链接到我自己的版本,这在Chrome 21(Windows 7)中按预期呈现.

Answer 2

我在这里粘贴的CSS错了,我正在编辑错误的文件DOH!

原始CSS不起作用

background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);

修复问题的CSS

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);

透明的问题不是颜色,它是黑色的0 alpha,设置为特别白色,0 alpha修复问题.(感谢@carisenda)

这仍然指出浏览器供应商如何处理CSS3渐变中的alpha透明度不一致.

Answer 3

除了白色之外的颜色（实际上是白色）的技巧rgba是褪色的实际颜色。

background-image: linear-gradient(to right, 
  rgba(111,174,249, 0) 0%,
  rgba(111,174,249, 0) 80%,
  rgb (111,174,249)    100%);

如果使用的颜色是十六进制（如#6faef9），请使用十六进制到 rgba 转换器来转换颜色。