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) 中渲染看起来像我想要的：

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

除白色以外的颜色（实际上是白色）的诀窍是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 4

我最近遇到了关于 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 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)