Question

我为文本创建了一个渐变类。它在谷歌浏览器中运行良好，但在Firefox和Internet Explorer中它并没有。在这些浏览器中，文本后面有一个我不想要的实际背景渐变。

我创造了一个小提琴，可以感知这种浏览器不同的行为。

<h1 class="gradient_blue" style="font-size: 60px;">Lorem Ipsum Lorem Ipsum</h1>

.gradient_blue {
  color: #288cc7;
  display: inline-block;
  background-color: #288cc7;
  background-image: -webkit-linear-gradient(left, #288cc7 0%, #206e9b 100%);
  background-image: -o-linear-gradient(left, #288cc7 0%, #206e9b 100%);
  background-image: linear-gradient(to right, #288cc7 0%, #206e9b 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#288cc7', endColorstr='#206e9b', GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

任何帮助表示赞赏！

Answer 1

您正在使用仅限WebKit的功能，例如-webkit-background-clip: text，这就是为什么它只适用于Chrome，Safari和Opera。不幸的是，它看起来并不像IE或Firefox有类似的功能。

如果您想制作文字渐变，可能是非WebKit浏览器的最佳替代方法是使用SVG gradients（jsfiddle here）：

<h1 class="gradient_blue" style="font-size: 60px;">
<svg height="100%" width="100%">
      <defs>
        <linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
          <stop offset="0%" style="stop-color:#288cc7;" />
          <stop offset="100%" style="stop-color:#206e9b;" />
        </linearGradient>
      </defs>
      <text fill="url(#gradient)" x="1%" y="30%">
         Lorem Ipsum Lorem Ipsum
      </text>
 </svg>
 </h1>

Answer 2

您正在使用两个webkit扩展属性：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

可悲的是，要杀死它们已经太晚了，所以Compatibility规范标准化了它们。

现在非webkit浏览器正在实现它们，但稳定的渠道尚不支持它们。

对于Firefox，它适用于最新的Nightly。相关的错误是：

Bug 1247777 - 实现-webkit-text-fill-color属性
Bug 1263516 - 在非发布版本中启用background-clip：文本首选项
Bug 759568 - 实现-webkit-background-clip：text（as background-clip：text）

等等。或者更好的是，不要使用这些永远不存在的属性。

CSS3渐变在Firefox和IE中不起作用（在chrome中工作）

2 个答案: