css3实现彩色渐变文字

这里所说的彩色渐变文字，并不是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);
}

关于这两个属性的说明，可以参考网上的介绍，这里就不展开了。