如何使用CSS的filter属性将颜色变为白色

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图像变成白色？

- Rehan

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和Opera Mini不受支持。好消息是，微软正在逐步淘汰IE浏览器。

注意保护好自己！

- Marc Hjorth

---

哦，是的，你把亮度调为0，就会变成黑色，然后再反转颜色。谢谢你的回答。 - Rehan

没错！@Rehan - Marc Hjorth