我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

在我们平常开发中,设计师会设计一些文字渐变来使网页具有特色,最直接的方法就是使用图片来代替文字,这样可以帮助我们的工程师解决一部分问题,且后期也方便维护,如果要更换的话也更换图片就好啦. 但是过年了所以我们用 css来实现新年快乐这几个文字.

第一种实现方法

第一种就是使用 background-clip和text-fill-color,首先来解释一下它们是什么吧

text-fill-color就是使用颜色来填充文本
baclground-clip: 设置元素的背景区域

得到的效果如下:

tips:background-clip:text的兼容性不好,一旦浏览器不兼容,背景就是暴露出来

第二种方法

第二种就是使用mask-image,它可以用于设置元素上遮罩层的图像.

none:默认值,透明的黑色图像层,也就是没有遮罩层
mask-source:css图像的url
image:使用图片作为遮罩层

#app{
  font-size: 24px;
    color: burlywood;
    position: relative;
}
#app::after{
  content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

第三种

第三种就是使用svg来写,svg里面有两种主要的渐变类型,分别是线性渐变linearGradient和放射性渐变radialGradient,而我们如果要是有来渐变文字还是会使用线性渐变.

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle"  
    fill="url(#SVGID_1_)" class="gradient-text-three" x="110px" y="30%">新年快乐</text>
</svg>

得到结果如下:

css实现文字渐变祝大家新年快乐

第一种实现方法

第二种方法

第三种