相关疑难解决方法(0)

是否有一个发电机,或者一个简单的方法来生成诸如文本这样,但不必定义每一封信

所以像这样:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

但不是彩虹色而是用其他颜色生成(例如白色到灰色/浅蓝色渐变等)我找不到一个简单的解决方案.有解决方案吗

我刚发现字体很棒,我想在我的网站上使用它.

问题是,我希望我的字体用渐变着色.我发现这个代码适用于标准文本,但我无法使用Font Awesome中的图标

这是我测试的:

<style>
    .big-icon {
        font-size: 72px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

<span class="big-icon">
    Hello world
</span>
<i class="icon-beaker"></i>
<span class="big-icon">
    <i class="icon-beaker"></i>
</span>

它显示了一个带有渐变的"Hello world",我想要的图标,然后没有...

任何人都有任何想法？

谢谢

无论如何,使用此文本渐变方法,并在文本上也有一个投影. http://css-tricks.com/snippets/css/gradient-text/

当我设置我的阴影像

text-shadow: 1px 1px 2px #000;

然后它会弄乱我的文本渐变,因为背景设置为透明.有没有人知道webkit浏览器的解决方案.

升级到FontAwesome 5后,我无法为FontAwesome的svgs着色.

这是我的例子:https: ????? //codepen.io/shadrix/pen/GygdZr

如果它像这里一样工作应该很棒:????? https ://codepen.io/immad-hamid/pen/jVNvQO(注意:他使用FontAwesome 4).