通过 css 实现文字颜色渐变很简单,只需要用到 css3 的 background-image 和 background-clip 两个属性即可。
示例代码及效果预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 实现文字渐变色</title>
</head>
<style type="text/css">
#linear-gradient {
font-size: 24px;
background-image: linear-gradient(red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
<body>
<div id="linear-gradient">零五网(www.02405.com) - 为热爱技术的人而生!</div>
</body>
</html>
重点说明
background-clip 背景裁剪
目前background-clip: text只有chrome支持,所以我们直接写成-webkit-background-clip:text;
这个属性的意思表示以区块文字作为裁剪区域向外裁剪,文字背景色=区块背景色。
color: transparent;
这个属性的意思就是把文字设为透明,因为我们的文字是有颜色的,只有把文字设为透明后面的背景色才能看到后面的背景色。