如何在不使用图像的情况下在CSS中使用渐变作为字体颜色?我想支持Firefox.
我使用过这段代码,但在Firefox中不支持:
Gradient Text.text1 { font-size: 40px; background: -webkit-linear-gradient(#0F3, #F00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
cytofu.. 20
您可以使用位于彼此顶部的多个跨距,并为每个跨距指定不同的高度和颜色.它的编码非常难看,但它确实有效. http://jsfiddle.net/7yBNv/
文本选择表现得有点时髦,但也不算太糟糕.复制复制几个条目(取决于选择的层)所以我说你最好用svg来解决这个问题.
(我从这里得到了答案,请查看更多详情:http://www.bagnall.co.uk/gradient_text.asp)
HTML:
Sample Gradient Text (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; }
我喜欢downvoters,他们拒绝了一个不完美但有效的解决方案,而没有提供更好的答案. (3认同)
是的,但我没有看到另一种方法来做它只有crossbrowser和css. (2认同)
Samuel Ondre.. 19
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代码:
hello
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无法在Firefox中运行
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无法在Firefox中运行
您可以使用位于彼此顶部的多个跨距,并为每个跨距指定不同的高度和颜色.它的编码非常难看,但它确实有效. 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; }
.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指定供应商前缀