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

发布时间：2020-12-14 19:00:03 所属栏目：资源来源：网络整理

导读：如何在CSS中使用渐变作为字体颜色,而不使用图像？我想支持Firefox. 我使用这个代码,但Firefox不支持 div class="text1" Gradient Text/div.text1 { font-size: 40px; background: -webkit-linear-gradient(#0F3,#F00); -webkit-background-clip: text; -webk

如何在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;
 }

解决方法

您可以使用位于彼此顶部的多个跨度,并为其中的每一个分配不同的高度和颜色.它真的很丑的编码明智,但它的作品.
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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!