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

Chrome 渲染会在变成白色之前变为灰色（Firefox 在 Mac OS 上也是这样渲染）：

有什么思路或建议可以解释为什么会出现这种奇怪的渲染效果吗？

- phawk

Answer 1

我也遇到过这个问题。我不确定为什么会发生，但以下是我在自己的项目中使用的解决方法：

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

不要给Chrome一个"透明"的值，而是给它非常接近透明的值。

编辑：我忘了发布指向我自己版本的链接，该版本在Chrome 21（Windows 7）中呈现效果如预期。

- wavetree

---

我遇到了一个问题，Safari在呈现transparent（透明）方面与我检查的其他浏览器不同。谢谢提示！ - HoppyKamper

我相信你实际上可以使用 rgba(255, 255, 255, 0) 来获得真正的透明度 - 这对我有效 :) - RB.

这是一篇旧文章。浏览器已经修复了与透明度相关的错误，现在这个链接可以正常运行：https://codepen.io/peiche/pen/mMKaLP - wavetree

很遗憾，即使在Safari TP中，“transparent”仍然无法使用。这是因为“transparent”被视为“透明黑色”；可以通过指定带有Alpha值为0的实际颜色来实现相同的效果。 - Jessidhia

@Kovensky 我成功地使用 rgba 和 0 alpha 来解决了 Safari 的问题，使得它可以从同一颜色过渡。例如，如果你想要从透明到酸橙色（rgb(0, 255, 0)）的渐变，可以使用以下代码： background: linear-gradient(top, rgba(0, 255, 0, 0), lime) 希望这能有所帮助。 编辑：我刚刚注意到你也在谈论同一个修复方法，抱歉 :) - Zudwa

也适用于 rgba(255,255,255,0)！ - Pioz

Answer 2

我在这里粘贴的CSS是错误的，我正在编辑错误的文件，糟糕！

原始的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 透明度方面的不一致性。

- phawk

---

这个解释（透明是黑色，alpha值为0）似乎不准确。尝试在黑色背景上使用从黑色到透明的渐变，使用255、255、255、0作为透明度。它会非常轻盈。 - Lucent

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的转换器将其转换为RGBA。

- WEBjuju

Answer 4

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

1. iOS白色变透明梯度层是灰色的
2. https://betterprogramming.pub/在IOS中创建透明梯度层的正确方法是什么？b082daa866b1层是灰色的

我注意到在CSS中，解决方案是使用白色而不是黑色，并添加0透明度。

rgb(255 255 255/0)

- iTaMaR

Answer 5

最近我在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%)

- Apophis