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%);

Rending看起来像我想要的Safari 6（mac）：

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

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

Answer 1

我也遇到过这种情况。我不确定它为什么会发生，但这就是我在自己的项目中用作解决方法的原因：

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

不要给Chrome一个“透明”的值，而是给它一些非常接近透明的东西。希望这有帮助！

修改：我忘记发布指向我自己version的链接，该链接在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

我最近在 safari 的透明度方面遇到了同样的问题。对我有用的是将 css 替换为已编译的 safari css。

这对我不起作用

 background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)

这对我有用

background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)

Answer 4

除了白色（实际上是白色）之外，还有一种颜色的技巧是 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），请使用a hex to rgba converter来转换颜色。

Answer 5

在原生 IOS 上也遇到同样的问题：

1. iOS White to Transparent Gradient Layer is Gray
2. https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

我注意到在 CSS 上的解决方案是使用白色而不是黑色，然后添加 0 透明度

rgb(255 255 255/0)