189 8069 5689

如何在css中设置字体颜色渐变

如何在css中设置字体颜色渐变?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联专注于企业营销型网站建设、网站重做改版、墨脱网站定制设计、自适应品牌网站建设、H5响应式网站商城网站制作、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为墨脱等各大城市提供网站开发制作服务。

css实现文字颜色渐变的三种方法

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考!

基础样式:

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

第一种方法,使用 background-cli、 text-fill-color:

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

说明 :

background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。

webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。

第二种方法,使用 mask-image:

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::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)));
}

说明:

mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。

第三种方法,使用 linearGradient、fill:

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}


    
        
            
            
            
        
    
    花信年华

说明:

在SVG中,有两种主要的渐变类型

线性渐变(linearGradient)

放射性渐变(radialGradient)

SVG中的渐变不仅可以用于填充图形元素,还可以填充文本元素

dom示例:




    
    
    CSS3渐变字体
    
    
    
    
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-two{
            color:red;
        }
        .gradient-text-two[data-content]::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)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    


    
        
            
                方法1. background-clip + text-fill-color
            

                             花样年华             

        

                                      方法2. mask-image             

                             豆蔻年华             

        

                                                   方法3. svg linearGradient             

                                                                                                                                                                                                                                       花信年华                              

          

    

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

关于如何在css中设置字体颜色渐变问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


文章名称:如何在css中设置字体颜色渐变
标题网址:http://cdxtjz.com/article/geshdi.html

其他资讯