CSS线性渐变透明度仅在Safari中行为不正常

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%;
}

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中看到的颜色是正确的。