css3实现彩色渐变文字

该文章由 leevare 发布于 ,归类于 HTML/CSS

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

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

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒