css - 有什么方法可以仅使用 CSS 为白色 PNG 图像着色？

Question

我知道有很多专门针对 webkit 的 css 过滤器，但我找不到为白色 (#FFFFFF) 图像着色的解决方案。我尝试了一些滤镜组合，但没有一个能使我的图像着色。我只能在灰度或棕褐色范围内更改图像。

所以我的问题是:有什么方法可以仅使用 css 将我全白的 png 更改为(例如)红色？

如图所示:

Answer 1

我最近有同样的问题，我认为这种方法值得 future 的读者分享。试试这个

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

亮度会使图像变暗，棕褐色会使图像有点发黄，饱和会增加颜色，最后色相旋转会改变颜色。虽然它不是跨浏览器友好的:

• IE不支持

• 在 chrome 上，hue-rotate(25deg) 会使任何图像变红，但您需要Firefox 中的负值，例如hue-rotate(-25deg) 使其变成红色。
  您可以使用它来定位 mozilla 浏览器: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

以下是我在使用 CSS 处理图像/图标时使用的一些有用的提示和工具:

• 如果您有图像的 svg 版本，您可以将它们转换为使用此工具的字体图标 https://icomoon.io/ .要更改颜色，您只需要 color:#f00; 就像字体颜色一样。
• 如果您需要在悬停状态下实现此效果，请在非悬停状态下使用带有 filter: brightness(0) invert(); 的红色图像，以及 filter: brightness(1 ); 在悬停状态。但是，这仍然无法在 IE 上运行
• 使用 Sprite 表。您可以使用图像编辑工具自己创建或使用在线提供的 Sprite 表生成器。然后，您可以使用 SpriteCow 获取 spritesheet 的每个子图像的 css。