CSS线性渐变透明度仅在Safari中行为异常 [英] CSS linear gradient transparency misbehaving only in Safari

问题描述

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

Something really strange is happening in Safari. I'm doing a simple gradient overlay to do a text fade effect. It works fine in Firefox and Chrome, but not Safari, which I find strange since Safari and Chrome are both Webkit based.

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

推荐答案

而不是:

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

尝试将透明设置为rgba颜色值.例如:

Try setting your transparent to an rgba color value. For example:

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

换句话说，两种颜色的rgb值应该匹配.例如:

In other words, the rgb value of both colors should match. For example:

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

按照w3c规范的定义，透明是黑色透明(rgba(0,0,0,0)).这意味着当您处于过渡的中间时，应该会出现一些黑色.

As defined by the w3c spec, transparent is black transparent (rgba(0,0,0,0)). That means that when you are in the middle of the transition, some black should appear.

根据规格，在Safari中看到的颜色是正确的颜色.

The color seen in Safari is the correct one, as per the specs.

这篇关于CSS线性渐变透明度仅在Safari中行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！