如何利用css给文字加渐变色

如何利用css给文字加渐变色

在日常项目中你或许遇到了这样的UI设计图。
在这个时候如果采用图片来替换文字的方式，在不同的版块遇到同样的渐变色，文字却不一样，一张张的替换图片的方式实在太麻烦。这个时候就可以用我们强大的css3来为文字加上渐变色。
下面就是实现渐变色的代码

 .world {
    font-size: 36px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #6f3df8, #5aa9ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

CSS3 渐变（gradients）可以让您在两个或多个指定的颜色之间显示平稳的过渡。

以前，我们必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），我们可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

语法如下

 background: linear-gradient(direction, color-stop1,  color-stop2, ...);

关于方向，默认方向是由上到下。如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

backgroun-clip是规定背景的绘制区域，他和box-sizing的取值非常类似 。
webkit-background-clip:text的意思是文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
-webkit-text-fill-color: transparent就是将文字设为透明。这样的文字原有的颜色就不会挡住我们设置好的背景渐变色了。效果就可以呈现出我们文章开头图片的效果。
用同样的原理，将文字的背景替换成图片。

     width: 100px;
        height: 100px;
        font-size: 36px;
        font-weight: bold;
        background-image: url(./images/2.jpg);
        background-position: center center;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

效果如图

今天的分享就到这里啦，若是文章内容有不对的，欢迎大家在评论区指正哦