如何向字体（CSS）添加渐变？

Question

[我正在寻找一种向这样的大胆字母添加渐变的方法： .png？1334229785“>

单词可以有一行或两行，并且字体高度取决于视口高度。

此示例在Chrome中有效，但不适用于FF：http://dabblet.com/gist/1695257

您会推荐任何可行的纯CSS解决方案吗？

Answer 1

我同意纳撒尼尔（Nathaniel）的上述意见，但是，如果您仍然想尝试一下，可以这样做：

Sample Code @ Codepen

<style>
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}

h1.methodA {
background: -webkit-linear-gradient(top, #1965a9, #000);
background: linear-gradient(top, #1965a9, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h1.methodB {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
}
</style>

<h1 class="methodA">Awesome Gradient Text Method A</h1>

<h1 class="methodB">Awesome Gradient Text Method B</h1>

Answer 2

根本不可能全部在non-webkit浏览器中的纯CSS中执行此操作。您的示例是在Webkit中执行此操作的正确方法，但是我将执行Webkit检测媒体查询，以确保Firefox在没有像CSS prefixes are becoming a threat - but is Webkit really to blame?这样的文本剪辑（读取so）的情况下永远不会尝试使用渐变。我想提醒您，这是non-spec的东西，您真的不应该使用它。

Answer 3

StackOverflow限制我发表评论，因此我在这里发表声明：

您在问题中发布的要点示例可在FireFox中使用（版本75）。

P.S .：我讨厌StackOverflow，因为它对新用户不利。限制太多。

Answer 4

重点是，此功能与其他浏览器不太兼容，但是我花了一些时间为您搜索它，发现了这一点：http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

希望它可以帮助您。

编辑：评论中的人们使我意识到，这对于文本而言是行不通的，我发现另一篇文章为您提供了答案：http://webdesignerwall.com/tutorials/css-gradient-text-effect