css3实现彩色渐变文字

这里所说的彩色渐变文字,并不是css3的渐变属性来实现的,而是使用background-cliptext-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);
}

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

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注