CSS 渐变 - 未在 Internet Explorer 中显示答案

【问题标题】：CSS Gradient - Not showing in Internet ExplorerCSS 渐变 - 未在 Internet Explorer 中显示
【发布时间】：2016-12-21 22:50:08
【问题描述】：

我希望对文本产生彩虹效果。我有以下代码可在除 Internet Explorer 之外的所有浏览器中运行。任何熟悉如何让它在 IE 中工作的人？

这是jsFiddle

HTML：

<span class="icon-child-work">
  Hello
</span>

CSS：

.icon-child-work {
  color: transparent;
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0.5,        #f22), color-stop(0.10, #f2f), color-stop(0.20, #22f), color-stop(0.25, #2ff),   color-stop(0.30, #128C16),color-stop(0.40, #2f2), color-stop(0.45, #ff2), color-stop(0.55, #f2f) );
  background-image: gradient( linear, left top, right top, color-stop(0.5, #f22), color-stop(0.10, #f2f), color-stop(0.20, #22f), color-stop(0.25, #2ff), color-stop(0.30, #128C16),color-stop(0.40, #2f2), color-stop(0.45, #ff2), color-stop(0.55, #f2f) );
  -webkit-background-clip: text;
  background-clip: text;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

  padding-right: 10px;
}

【问题讨论】：

标签： html css internet-explorer gradient

【解决方案1】：

这将解决旧版本 IE 的背景渐变问题，但不是文本：

background: linear-gradient(to bottom, #feffff 0%,#1471da 50%,#1C85FB 100%); /* Supports IE10+ and several other older browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1471da', endColorstr='#1C85FB',GradientType=0 ); /* Supports IE6-9 */

【讨论】：

渐变显示为整个跨度的背景。我需要它来过滤文本
看起来我“误读”了这个问题。您需要支持的最旧版本是什么？我会更新答案。
噢！因此，要在旧版本的 IE 上支持渐变文本，我认为没有等效的过滤器。你愿意使用一些 JS 吗？
不反对。
去看看这个。我已经在 IE9 上测试过了，它运行良好。 IE8 有一个问题：w3schools.com/TAgs/canvas_filltext.asp 然后还有一个 jquery 插件，IE 覆盖率不错，回到 IE7 jqueryscript.net/text/…