Question

<div class="firstname">
<a href="index.html"><p class="names">DANIEL</p></a>
</div>

以上是html。

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

h1.method2 {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));}

以上是我尝试使用.names选择器和.firstname .names选择器，我尝试了a.names选择器，我不确定该方法是否工作或我使用错误的选择器。但总的来说，我只是希望文本有一点渐变才能看起来很好。

Answer 1

将text-shadow css属性与规则末尾的inset一起使用。这是最常用的浏览器方式。 IE9可能不支持它，但就是这样。

使用rgba颜色进行更好的控制并在浏览器中编辑Alpha通道（如firebug）

Answer 2

来源：http://css-tricks.com/snippets/css/gradient-text/

这只是WebKit，但却是最简洁的方法，因为文本仍然是可编辑的可选网页文本。

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

如何使用css添加文本渐变？

2 个答案: