为什么Safari和Firefox似乎会错误地呈现我的渐变色，我该如何解决？

Question

这是CodePen上的代码。在Chrome中它看起来完全符合我的期望。但Firefox和Safari都显示错误。（我使用了它们最新的版本。）

我正在寻找一种方法来在多个inline-block元素之间使用恒定的渐变背景。以下是目前的工作方式：

1. 我有一个父级ol，其:before伪元素具有渐变背景（从transparent到不透明颜色），并且设置了z-index以使其显示在子li上方。 2. li的background-color设置为类似于渐变的transparent值的颜色。 3. li的color设置为transparent，并且有:before伪元素显示先前设置为transparent的文本，并将它们的z-index设置为显示在ol:before（带有背景渐变）上方。

我在Firefox中看到的问题：

1. 渐变看起来像有3个颜色停止点（transparent、灰色、transparent），而不是设置的2个。 2. 渐变似乎设置了一种混合模式。

我在Safari中看到的问题：

除了Firefox中的相同问题外，它还显示了两个渐变，似乎都有混合模式。一个来自-webkit-linear-gradient，另一个来自linear-gradient。然而，解决明显混合模式的问题应该解决这第三个问题。

我的谷歌搜索让我意识到background-blend-mode，但将其设置为normal（或任何其他有效值）没有改变任何东西。我认为它仅适用于单个元素上的多个背景，但我不确定。然而，这可以解释为什么它不能解决我的问题。

- Curtis Blackwell

Answer 1

问题在于我使用了关键词transparent而不是它逐渐过渡到的颜色的透明版本。没有按预期呈现渐变的浏览器将transparent视为透明黑色。这意味着渐变中存在着黑色和我的颜色之间的不同过渡。

我正在使用SASS，所以解决方法很简单：只需使用rgba()函数将我的十六进制颜色转换为rgba。 background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary); 我更新了CodePen上的代码以展示解决方案。

- Curtis Blackwell

Answer 2

对于一些不支持样式的浏览器，您需要添加此前缀。

对于 Mozilla，请使用：

-moz-linear-gradient   /* FF3.6+ */

for chrome/safari

-webkit-gradient     /* Chrome,Safari4+ */

-webkit-linear-gradient   /* Chrome10+,Safari5.1+ */

为了Opera

 -o-linear-gradient    /* Opera 11.10+ */

适用于IE 10+

-ms-linear-gradient  /* IE10+ */

我已经通过添加前缀检查来编辑了你的 CodePen JS Fiddle

- Vitorino fernandes

---

必要的前缀已经存在。CodePen正在使用自动前缀生成器。此外，渐变在任何当前版本中都不再需要任何前缀，请参见Can I use…。 - Curtis Blackwell