html - 白色 icon.png 到蓝色 icon.png (html/css)

Question

白色 icon.png 到蓝色 icon.png (html/css)

之前是白色icon.png。之后它也有白色。如何制作，例如，蓝色 icon.png？

HTML:

<img src="icon.png" class="icon1">

CSS:

icon1 {
 background: url(icon.png);
 color: blue;
}
//not working

或者这个

html:

<img src="icon.png" class="icon2">

CSS:

icon2 {
 color: blue;
}
//also not working

你能告诉我怎么做吗？不是 photoshop，只有 html 和 css。

Answer 1

可能与 mask-image

如你所见

div {
  width: 600px;
  height: 600px;
  background-color: blue; /* select your want color */
  -webkit-mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);
  mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
}

<div></div>