这里所说的彩色渐变文字，并不是css3的渐变属性来实现的，而是使用background-clip和text-fill-color这两个属性来实现，还需要一张颜色渐变的背景图片。
这是实现的最终效果
实现的代码如下：
html代码
<span class="text-mask">我是实现的效果</span>
css代码，background-image是一张颜色渐变的背景图片。
.text-mask {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-position: 50%;
background-size: 1123px 400px;
background-repeat: no-repeat;
background-image: url(https://images.apple.com/v/iphone-7/d/images/overview/camera_how_to_shoot_background_large.jpg);
}
关于这两个属性的说明，可以参考网上的介绍，这里就不展开了。
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么