如何给文字的color设置渐变

53 阅读1分钟
//文字
.title {
    background: -webkit-linear-gradient(180deg, #d6cbee 0%, #b9a6e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

//icon(阿里巴巴矢量图)
.icon-close {
    font-size: 16px;
    background: -webkit-linear-gradient(180deg, #d6cbee 0%, #b9a6e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

在阿里巴巴矢量图中,icon需要给到特定的色值,一般通过color设置,但是有些icon是渐变的,所以需要区别对待。

渐变色的icon需要在css中设置className并引入,纯色icon可直接在style中设置color。

<i className="iconfont icon-hudongguanli-zhuaquguizepeizhi" style={{ color: '#7041F8' }} />

<i className="iconfont icon-hudongguanli-zhuaquguizepeizhi linear-icon-1" />


.iconfont {
    font-size: 20px;
    line-height: 20px;
}
.linear-icon-1 {
    background: -webkit-linear-gradient(180deg, #aae4c5 0%, #4fbb81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}