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>

Answer 2

您还可以使用Bootstrap和glyphicons。借助Bootstrap，您将可以通过使用如下HTML来拥有内联图标：

<span class="glyphicon glyphicon-question-sign"></span>

有几种方法可以将这些图标在深色背景上涂成白色。

Here是受支持的图标的列表。

白色icon.png到蓝色icon.png（html / css）

2 个答案: