Question

我希望对文字产生彩虹效果。我有以下代码，除了Internet Explorer之外，所有浏览器都可以使用。有谁熟悉如何在IE中使用它？

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

Answer 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 */

CSS Gradient - 未在Internet Explorer中显示

1 个答案: