时间戳

首页 > 解决方案 > 仅使用 CSS，有没有办法将特定图像的颜色更改为黑底白字？

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

问题描述

我使用 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如果你使用或其他技术对我来说并不重要。

标签： cssimageuser-interfacefirefoxcolors

解决方案

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

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>

推荐阅读