透明渐变在Safari中无法正常工作

Question

Chrome/Firefox（最新版本）：

Safari（最新版本）：

代码：

background: linear-gradient(180deg, rgba(255,128,0,1) 0%, rgba(255,128,0,.6) 50%, rgba(255,255,255,0) 100%);

尝试过：

rgba(255,255,255,0.001)
transparent
-webkit-linear-gradient

- Angel Luis

---

你的head-section里有base-tag吗？我之前遇到过一些渐变问题，移除这个标签后问题得到了解决。 - Peter Bode

@PeterBode 不。 - Angel Luis

Safari存在一个已知问题（参见：https://css-tricks.com/thing-know-gradients-transparent-black/），即将“transparent”渲染为“transparent black”。您尝试过将“transparent”更改为其他内容，例如“rgba（255,255,255,0）”吗？ - Robert

@Robert 它渲染为“透明色”。因此，在上面的例子中，它是“透明白色”，但我可以将其更改为“透明红色”等。但它应该仅是“透明”。我总是使用rgba而不是关键字。 - Angel Luis

我唯一能够重现这个错误的方法是，如果Safari没有为父元素声明背景。例如，如果“html”没有背景，但“body”有背景，则无论您使用关键字还是RGBA，都会遇到“透明黑色”错误。设置父元素的背景似乎可以解决这个问题。请问您是否遇到了类似的结果？ - Robert

Answer 1

此问题在以下链接中得到了充分的解释：https://css-tricks.com/thing-know-gradients-transparent-black/。此外，下面是几个关于同一问题的Github链接：https://github.com/jakubpawlowicz/clean-css/issues/315，https://github.com/Compass/compass/issues/2010。我认为，在未来的版本中他们修复此问题之前，您需要一个解决方法。祝一切顺利！

- Tariq Saeed