阿里巴巴矢量图标库的图标渐变色的显示

EstherNi

已于 2024-01-30 10:47:13 修改

阅读量408

点赞数 2

文章标签： javascript 前端

于 2024-01-30 10:01:38 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/135926388

版权

在这里插入图片描述

<i class="iconfont icon-qiye2"></i>
写法1：
.iconfont {
   &::before {
        background: -webkit-gradient(linear,0 0,0 100%,from(#000),to(#fff));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
写法2：
.iconfont {
        background: -webkit-gradient(linear,0 0,0 100%,from(#000),to(#fff));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

如果要动态改变颜色可这样写
<i class="iconfont icon-qiye2" :style="{background:iconBg,backgroundClip:'text'}"></i>
iconBg = "-webkit-gradient(linear,0 0,0 100%,from(#54a7f7),to(#3074e2))",
.iconfont {
    -webkit-text-fill-color: transparent;
}