如何在CSS中使用渐变作为字体颜色？ [英] How do I use a gradient as a font color in CSS?

问题描述

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

How do I use a gradient as a font color in CSS, without using images? I want to support Firefox.

我已经使用了这个代码，但在Firefox中不支持：

I have used this code but it's not supported in 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;
 }

推荐答案

被定位在彼此的顶部，并且为它们中的每一个分配不同的高度和颜色。它真的丑陋的编码明智，但它的工作原理。
http://jsfiddle.net/7yBNv/

you can use multiple spans that are positioned on top of each other and assign a different height and color to each of them. Its really ugly coding wise, but it works. http://jsfiddle.net/7yBNv/

文本选择的行为有点时髦，但不是太糟糕。复制复制几个条目（取决于选择哪个层）所以我想说你最好用svg解决这个问题。

Text selection is behaving a bit funky, but not too bad. And copying copies several entries (depending on which layer is selected) So I'd say you are better of solving this with svg's.

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

(I got the answer from here ,check there for more details: 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;
}

这篇关于如何在CSS中使用渐变作为字体颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！