html - 如何使用 CSS 中的过滤器属性使颜色变为白色

Question

我有一个 svg 图像，我想使用 css filter 属性更改 svg 的颜色。

body {
  background-color: #dadada;
}

.custom-1 {
  filter: invert(0.5);
}

<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="standard" width="50" height="50" alt="img">

<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="custom-1" width="50" height="50" alt="img">

如何将 svg 图像设为白色。

Answer 1

您可以像这样组合过滤器属性。

brightness(0) invert(1);

body {
  background-color: #dadada;
}

.custom-1 {
  filter: invert(0.5);
}

.custom-2 {
  filter:  brightness(0) invert(1);
}

<img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">

编辑 - 2021 年 5 月 25 日:

这个答案非常受欢迎，因此我想提醒您，filter 不被 Internet Explorer and Opera Mini 支持 .好消息是Microsoft is slowly phasing out IE .

保重!