如何使用CSS3的渐变来实现文字颜色的渐变？

　　在文本上加上颜色渐变

　　这是一种将渐变色设置为文本的背景颜色。目前支持的浏览器是GoogleChrome，Safari，Opera。（推荐课程：CSS3视频教程）

　　HTML

　　<h1>你好，PHP中文网</h1>

　　HTML列出了要按原样渐变的文本。

　　CSS

　　h1{

　　color:#ACB6E5;

　　background:-webkit-linear-gradient(90deg,#ACB6E5,#86FDE8);

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　}

　　效果如下：

　　360截图20181108154532389.jpg

　　也可以通过指定渐变的角度来改变颜色的位置，使其有点粗糙的质感。

　　CSS

　　h1{

　　color:#FF7C00;

　　background:-webkit-linear-gradient(top,#FFB76B0%,#FFA73D50%,#FF7C0051%,#FF7F04100%);

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　}

　　效果如下：

　　360截图20181108155108522.jpg

　　用图像来填充文字的颜色

　　除了将渐变色设置为背景颜色，还可以用图像来设置字体颜色。

　　我们来用这张图片为背景设置颜色

　　keiskei.jpg

　　代码如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<styletype="text/css">

　　h1{

　　color:#333;

　　background:url("image/keiskei.jpg");

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　}

　　</style>

　　</head>

　　<body>

　　<h1>你好，PHP中文网</h1>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55062.shtml