css - 为什么 Safari 和 Firefox 似乎错误地渲染了我的渐变，我该如何解决？

Question

Here's the code on CodePen .它看起来完全符合我在 Chrome 中的预期。 Firefox 和 Safari 看起来都不对。 (我使用的是所有 3 个的最新版本。)

我正在研究一种跨多个 inline-block 元素使用恒定渐变背景的方法。以下是它现在的工作方式:

1. 我有一个父 ol，其 :before 伪元素具有渐变背景(透明 到不透明颜色)和一个 z-index 设置为在子 lis 上方显示它。
2. li 将 background-color 设置为 看起来像 渐变的 transparent 的颜色值设置为。
3. li 的 color 设置为 transparent 并有 :before 伪元素显示之前设置为 transparent 且其 z 索引设置为显示在 ol:before 上方的文本(带有背景渐变)。

我在 Firefox 中看到的问题:

1. 渐变看起来有 3 个色标(透明、灰色、透明)，而不是设置的 2 个。
2. 渐变看起来好像设置了多重混合模式。

我在 Safari 中看到的问题:

除了 Firefox 中的相同问题外，它还显示了两个似乎具有多重混合模式的渐变。一个来自 -webkit-linear-gradient，一个来自 linear-gradient。不过，解决明显混合模式的问题应该注意第三个问题。

---

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

Answer 1

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

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

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


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