我正在寻找一种将渐变添加到大粗体字母的方法，如下所示：
单词可以有一行或两行，字体高度取决于视口高度。
此示例适用于 Chrome，但不适用于 FF：http ://dabblet.com/gist/1695257
您会推荐任何可行的纯 CSS 解决方案吗？
问问题
8740 次
3 回答
5
在非 webkit浏览器中使用纯 css完全不可能做到这一点。您的示例是在 webkit 中执行此操作的正确方法，但我会进行 webkit 检测媒体查询，以确保 Firefox 永远不会尝试在没有文本剪辑的情况下使用渐变（读取CSS 前缀正在成为威胁 - 但 Webkit 真的怪罪？） 喜欢这样。我可以提醒你，这是非规范的东西，你真的不应该使用它。
于 2012-04-12T13:51:32.153 回答
1
我同意 Nathaniel 上面所说的，但如果你仍然想尝试，那么你可以这样做：
<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>
于 2014-03-25T18:42:59.427 回答
-2
关键是这个功能不太容易与不同的浏览器兼容，但是我花时间为你搜索了一下，发现： http ://robertnyman.com/2010/02/15/css-gradients-for-all-不使用图像的网络浏览器/
希望它可以帮助你。
编辑：评论中的人让我意识到这不适用于文本，因此我发现另一篇文章为您提供了答案： http ://webdesignerwall.com/tutorials/css-gradient-text-影响
于 2012-04-12T11:32:27.333 回答