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

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

我用来测试的文件是：

使用的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上也会以这种方式渲染）：

---

关于为什么会出现这种奇怪的渲染，有什么想法或建议吗？

我也遇到过这种情况。我不知道为什么会发生这种情况，但以下是我在自己的项目中使用的解决方法：

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

与其给Chrome一个“透明”的值，不如给它一个非常非常接近透明的值。希望这有帮助

---

编辑：我忘了发布我自己的链接，它在Chrome 21（Windows 7）中按预期呈现。

我在这里粘贴的CSS是错误的，我编辑了错误的文件DOH

原始CSS不起作用 CSS解决了这个问题 透明不是一种颜色的问题，它是带有0 alpha的黑色，设置为带有0 alpha的白色可以修复该问题。（谢谢@carisenda）

---

这仍然表明浏览器供应商在处理CSS3渐变中的alpha透明度时存在不一致。

除了白色之外的颜色（实际上是白色）的诀窍是

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

），请使用转换颜色。

我最近在safari上遇到了同样的透明度问题。对我来说，有效的方法是将css替换到编译后的SafariCSS中

这对我不起作用

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

这确实对我有用

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

---

我曾经遇到过这样一个问题，Safari呈现的

透明

与我检查的其他浏览器不同。谢谢你的提示！我相信你实际上可以使用

rgba（255，255，255，0）

来获得真正的透明度——不管怎样，这对我来说很有用：）这是一篇老文章。浏览器已经修复了与透明性相关的bug，但现在这一切都起作用了：不幸的是，“透明”在Safari中仍然不起作用，甚至在Safari TP中也不起作用。这是因为“透明”被视为“透明黑”；使用0的alpha值指定实际颜色是可行的。@Kovensky我成功地解决了Safari的问题，使用了0 alpha值的rgba来处理它转换到的相同颜色。例如，如果您想要从透明渐变到石灰（

rgb（0，255，0）

），请使用以下命令：

背景：线性渐变（顶部，rgba（0，255，0，0），石灰）

希望这能有所帮助。编辑：刚刚注意到您正在谈论相同的修复，抱歉：）此解释（透明为黑色，带有0 alpha）似乎不准确。尝试在黑色背景上使用255、255、255、0作为透明，从黑色渐变为透明。会很轻的。