反转图像颜色

Question

我有一个在vue模板中导入的图像，该图像是黑色的。我希望图像是这种颜色(#0768fd(如何得到这个。

我试着分配课程和造型，但不起作用

<img alt="icon"
:src="require(`@/assets/images/group-icon.png`)                   "
class="icon-class invert"/>

.icon-class {
width: 24px !important;
height: 24px !important;
margin: 0 6px 0 0;
padding: 2px;
color:#0768fd;
background-color:#0768fd;
border-radius: 50%;
border: solid 1px black !important;
}
.invert {
filter: invert(0.6);
}

Answer 1

您不应该用css更改PNG图像的颜色，而是使用图标的内联SVG，这样您就可以在悬停时更改颜色。也就是说，您可以(在理论上(使用cssfilter属性来实现将PNG更改为特定十六进制值的结果，但很难获得正确的颜色。我为您创建了一个过滤器，使您的png颜色为#0768fd:

.blue-filter {
filter: invert(26%) sepia(95%) saturate(2692%) hue-rotate(211deg) brightness(98%) contrast(102%);
}

<img src="https://image.flaticon.com/icons/png/512/32/32441.png"  width="50" />
<img src="https://image.flaticon.com/icons/png/512/32/32441.png"  width="50" class="blue-filter" />

Answer 2

生成CSS过滤器(足够接近(以针对HEX代码：https://codepen.io/sosuke/pen/Pjoqqp

img {
height: 68px;
filter: invert(26%) sepia(100%) saturate(1711%) hue-rotate(207deg) brightness(99%) contrast(111%);
}

<img src="https://image.flaticon.com/icons/png/512/32/32441.png" alt="" />