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

Question

在Safari中发生了一些非常奇怪的事情.我正在做一个简单的渐变叠加来做文本淡入淡出效果.它适用于Firefox和Chrome,但不适用于Safari,我觉得很奇怪,因为Safari和Chrome都是基于Webkit的.

苹果浏览器

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