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

【问题标题】：How to make a color white using filter property in CSS如何使用 CSS 中的过滤器属性使颜色变为白色
【发布时间】：2019-03-20 15:24:45
【问题描述】：

我有一个 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 图像设为白色。

【问题讨论】：

标签： html css css-filters

【解决方案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 日：

这个答案很受欢迎，因此我想警告您Internet Explorer and Opera Mini 不支持filter。好消息是Microsoft is slowly phasing out IE。

保重！

【讨论】：

哦，是的，您将亮度设为 0，然后变为黑色，然后反转颜色。感谢您的回答。
没错！ @Rehan