Question

如何在CSS中使用渐变作为字体颜色而不使用图像？我想支持Firefox。

我使用过此代码，但Firefox不支持：

<div class="text1"> Gradient Text</div>

.text1
 {
  font-size: 40px;
  background: -webkit-linear-gradient(#0F3, #F00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

Answer 1

Firefox支持：
不幸的是，只有WebKit浏览器实现了text-fill-color Mozilla还没有解决方法。

Lea Verou的精彩帖子：
http://lea.verou.me/2012/05/text-masking-the-standards-way/

WebKit演示：
http://jsfiddle.net/ondrek/trr67/

HTML和CSS代码：

<h1>hello</h1>

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

如何生成自己的渐变：
您也可以在
生成自己的渐变 http://www.colorzilla.com/gradient-editor/

与以下问题重复：
CSS3 Gradient not working in Firefox

Answer 2

您可以使用多个位于彼此顶部的跨距，并为每个跨度指定不同的高度和颜色。它的编码非常难看，但它确实有效。 http://jsfiddle.net/7yBNv/

文字选择表现得有点时髦，但也不算太糟糕。复制复制几个条目（取决于选择的层）所以我说你最好用svg来解决这个问题。

（我从这里得到了答案，请查看更多详情：http://www.bagnall.co.uk/gradient_text.asp）

HTML：

<h1 class="Gradient">Sample Gradient Text (h1)
   <span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</h1>

的CSS：

.Gradient{
    position: relative;
    overflow: hidden;
    height: 28px;
}
.Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
    height: 28px;
    position: absolute;
    margin: 0;
    top: 0px;
    left: 0px;
    color: #4a778b;
    font-family: century gothic,helvetica,arial;
    font-size: 23px;
    font-weight: normal;
    overflow: hidden;
}
.Gradient{
    position: relative;
}
.Gradient .G5{
    height: 10px;
    color: #81a4b4;
    z-index: 6;
}
.Gradient .G4{
    height: 13px;
    color: #789eae;
    z-index: 5;
}
.Gradient .G3{
    height: 16px;
    color: #6f96a6;
    z-index: 4;
}
.Gradient .G2{
    height: 19px;
    color: #618a9c;
    z-index: 3;
}
.Gradient .G1{
    height: 22px;
    color: #547f92;
    z-index: 2;
}

Answer 3

.text1
 {
  font-size: 40px;
  background: -webkit-linear-gradient(#0F3, #F00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
background: -moz-linear-gradient(#0F3, #F00);
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
 }

您必须为firefox指定供应商前缀

Answer 4

您可以使用此生成器 textgradient.com来制作CSS渐变文字。

如何在CSS中使用渐变作为字体颜色？

4 个答案: