这里所说的彩色渐变文字,并不是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);
}
关于这两个属性的说明,可以参考网上的介绍,这里就不展开了。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!