CSS3 渐变在 firefox 和 IE 中不起作用(在 chrome 中起作用)

Question

我为文本创建了一个渐变类。它在 google chrome 中运行良好，但在 firefox 和 internet explorer 中则不然。在这些浏览器中，我不希望在文本后面看到实际的背景渐变。

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

https://jsfiddle.net/Lzhvsowq/

<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>