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

Question

我为文本创建了渐变 class。它在 google chrome 中运行良好，但在 Firefox 和 Internet Explorer 中则不然。在这些浏览器中，我不想要的文本后面有可见的实际背景渐变。

我创建了一个 fiddle 可以感知这种浏览器不同行为的地方。

<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 - 在非发布版本中启用背景剪辑：文本首选项
Bug 759568 - 实施 -webkit-background-clip: text（作为 background-clip: text）

所以请稍等。或者更好的是，不要使用这些本不应该存在的属性。

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

CSS3 gradient not working in firefox and IE (works in chrome)

css

gradient