如何在CSS中使用滤镜属性使颜色变为白色

Question

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

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">