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

Question

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

Safari

Chrome 和火狐

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