为什么Safari和Firefox似乎错误地渲染我的渐变，我该如何修复它？

Question

Here's the code on CodePen。它看起来与我在Chrome中的预期完全一样。 Firefox和Safari都看错了。 （我在所有3的最新版本。）

我正在研究在多个inline-block元素中使用常量渐变背景的方法。以下是它现在的工作方式：

1. 我有一个父ol，其:before伪元素具有渐变背景（transparent到不透明颜色），z-index设置为在子元素上方显示li {1}}秒。
2. li将background-color设置为看起来像渐变的transparent值设置为的颜色。
3. li的{​​{1}}设置为color，并且transparent个伪元素显示之前设置为:before的文本并拥有z-indices设置为显示在transparent上方（带背景渐变）。

我在Firefox中遇到的问题：

1. 渐变看起来有3个颜色停止（透明，灰色，透明）而不是设置的2个。
2. 渐变似乎有一个多重混合模式设置。

我在Safari中看到的问题：

除了Firefox中的相同问题外，它还显示两个似乎具有多重混合模式的渐变。一个来自ol:before，一个来自-webkit-linear-gradient。但是，解决明显混合模式的问题应该考虑到第三个问题。

---

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

Answer 1

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

我使用SASS所以修复非常简单：只需使用rgba()函数将我的十六进制颜色转换为rgba。

background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary);

我更新了the code on CodePen以显示解决方案。

Answer 2

您需要为某些不采用样式的浏览器添加此前缀

使用mozilla

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

用于chrome / safari

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

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

for opera

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

表示即10 +

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

我已经通过添加前缀检查了您的codepen JS Fiddle