在Safari中CSS线性渐变透明度存在问题

Question

在Safari中发生了一些非常奇怪的事情。我正在使用简单的渐变叠加来实现文本淡出效果。它在Firefox和Chrome中都可以正常工作，但在Safari中却不能，这让我感到很奇怪，因为Safari和Chrome都是基于Webkit的。

Safari

Chrome和Firefox

CSS代码

.text-fade {
  background: linear-gradient(to top, white, transparent);
  bottom: 0;
  height: 25%;
  margin: 0;
  position: absolute;
  width: 100%;
}

- CaptSaltyJack

Answer 1

改为：

background: linear-gradient(to top, white, transparent);

尝试将您的透明度设置为rgba颜色值。例如：

background: linear-gradient(to top, white, rgba(255,255,255,0));

换句话说，两种颜色的RGB值应该匹配。例如：

background: linear-gradient(to top, red, rgba(255,0,0,0));

根据w3c规范的定义，透明指的是黑色透明(rgba(0,0,0,0))。这意味着在过渡过程中会出现一些黑色。Safari中看到的颜色是正确的，符合规范。

- Amy

---

谢谢你的建议。我已经尝试过了，但是没有解决问题。 - CaptSaltyJack

哦！糟糕，我知道我错了。你是对的，它确实有效。显然，Safari不喜欢渐变中的“transparent”关键字。谢谢！ - CaptSaltyJack

增加了一点关于此背后原因的解释。 - vals

到目前为止，我找到的唯一解释是根本原因！谢谢！ - sahilkhosla

换句话说，两种颜色的 RGB 值应该相同。-谢谢。这对我帮助很大。 - vaishali kapadia