仅使用CSS，有没有办法将特定图像的颜色改为黑底白字？

Question

我使用CSS创建一些流行网站的深色主题版本。

我遇到的问题之一是这些图像：

https://www.gstatic.com/images/icons/material/system/1x/reply_black_20dp.png

https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png

站点使用background-image来显示这些图像。

当我将filter: invert(1)应用于这些图像时，在Firefox中会得到一个白色图像。

有没有一种方法，仅使用CSS，可以使这些图像在黑色上显示为白色？如果您使用filter或其他技术，对我来说都没关系。

Answer 1

只需应用白色背景，然后进行过滤：

img {
  background: #fff;
  filter: invert(1);
}

<img src="https://i.stack.imgur.com/ZLpPT.png">

有背景：

img {
  background: #fff;
}
.box {
  background:
   url(https://i.stack.imgur.com/ZLpPT.png) 0 0/20px 20px no-repeat,
   #fff;
  width:100px;
  height:100px;
  filter: invert(1);
}

<div class="box"></div>