css3字体颜色渐变
效果图:
代码:
<span class="titleName">这是个测试字体</span>
.titleName { background: linear-gradient(#ffffff,50%,#7e7e7e); -webkit-background-clip: text; color: transparent; }
-webkit-background-clip: text;
-webkit-background-clip: text;意思是,以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。
首先:给外层div来一个渐变。
其次:用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪;
最后:把文字变透明:可以用rgba给文本填充透明颜色或者直接设置color: transparent;