Skip to main content

修改图片颜色

· One min read
wang bo
wang bo
早睡早起

在写老项目时，iconfont网站的在线链接因年代久远项目图标库找不到了， 没办法使用的下载到本地的图标，但是还需要给图标变色，连着导出两个图标太low了，所以我发现了以下修改图标的方法并记录下来。

第一种方式： 把图标投影，并设置偏移量，设置超出隐藏#

<div class="box">    <i class="icon-thumbup"></i></div>
  1. 设置图标投影（并改变图标颜色为黑色）
.icon >.icon-thumbup {    filter: drop-shadow(20px 0 #000); }
  1. 设置偏移量并父元素设置overflow: hidden;
.icon{    overflow:hidden;    display: inline-block;    position: relative;    height:30px;    width: 40px;}.icon >.icon-thumbup {    filter: drop-shadow(20px 0 #000);     position: relative;    left: -20px;}

不生效注意 --- hidden对块状布局生效

第二种方式： css mask#

.icon-thumbup {  background-color: currentColor;  mask-image: url(icon.svg);}

是的你没有看错， mask方式还可以使用 currentColor 为其着色

参考文献#