如何使用 css / html 或 javascript 为灰度图像添加颜色？答案

【问题标题】：How to add color to grayscale images with css / html or javascript?如何使用 css / html 或 javascript 为灰度图像添加颜色？
【发布时间】：2018-09-27 21:14:37
【问题描述】：

我有一个 CP437 瓦片组：

我想在网页上用作 CSS sprite 目前，我有一个非常简单的标记和 css：

.tile {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.cp437-0 {
    background: url('tileset/tileset.png') 0 0;
}

.cp437-1 {
    background: url('tileset/tileset.png') 16px 0;
}

// ...

<span class="tile, cp437-0">&nbsp;</span>

这很好用，但我还想为这些灰度精灵添加颜色。如何使用 HTML/CSS 或 Javascript 做到这一点？

是否可以为生成的图像设置背景颜色？

澄清：

我希望能够使用精灵在浏览器窗口中绘制类似这样的东西：

【问题讨论】：

“背景颜色”是什么意思？有一个名为background-color 的简单CSS 属性可以做到这一点。请澄清你的问题。就目前而言，包括我在内的每个人似乎都明白你想把白色变成黑色，变成其他阴影。是这样吗？然后，既然你的图像是由一种颜色构成的，那么主图像应该是什么？即，如果您将其设置为 color1，它应该是 white to color1 还是 color1 to black 或 color1 to color2也许？
我有一个文件（粘贴到我的问题中），我想像使用文本图标一样使用它（例如 FontAwesome）。我还想单独设置背景和前景（这是灰度精灵将转换为的颜色）。我已经更新了我的问题以供澄清。
因此，从 color1 到 black，您的示例没有背景（以及象牙色，但我希望您知道如何制作）。如果您想要的实际上是字体，为什么要使用 css spritesheet？ Lazar 的解决方案有哪些不适用的地方？
因为字体不是像素完美的。我以前尝试过这种方法。

标签： javascript html css colors sprite

【解决方案1】：

没有纯 CSS 方法可以做到这一点——您至少需要一些 SVG 魔法。例如，您可以定义一个过滤器。然而，确定颜色是很棘手的，因为它需要一些关于数学、矩阵和计算机如何处理颜色的不那么简单的知识。

这是一个带有金色图像的示例。

.defs-only {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: -1;
  width: 1px;
  height: 1px;
}

img {
  filter:  url(#monochrome);
}

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

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

查看，例如，this article for more info。

【讨论】：

是否有一些代码可以将 #ab1248 这样的 css 颜色转换为这样的过滤器？
正如我所提到的：“但是，确定颜色很棘手，因为它需要一些不那么简单的数学知识、矩阵知识以及计算机如何处理颜色。”
您可以从数学答案中查看链接的文章。
还有 javascript？
JavaScript 需要使用一些画布，其处理比 SVG 还要低级。我不认为这是可能的——至少不是微不足道的。但可以肯定：它可以完成。如果您可以获得非灰度图像，则可以轻松旋转色调。但是您的图像真的与所有可能的解决方案都不同（透明度也搞砸了，请参阅我的其他答案）。

【解决方案2】：

您也可以使用blend-modes，但由于您的图像是透明的，不幸的是，它也会将背景颜色应用于...背景。如果您可以使用黑色背景获得相同的图像，它将起作用。 full list of blend modes 如果在 MDN 上可用，那么您可以使用不同的值。

.sprite {
  width: 256px;
  height: 256px;
  background-image: url(https://i.stack.imgur.com/nQET4.png);
  background-color: #ab1248;
  background-blend-mode: hard-light;
  
}

&lt;div class="sprite"&gt;

【讨论】：

我想分别设置背景和前景色。像这样：cdn.discordapp.com/attachments/363771631727804416/…

【解决方案3】：

如果你使用透明png，你可以结合mask和mix-blend-mode

.bubble{
  display: inline-block;
  float: left;
  -webkit-mask: url(https://i.stack.imgur.com/og0JD.png);
  mix-blend-mode: normal;
  width:20px;
  height:20px;
}

#color1{
  background-color:blue;
}

#color2{
  background-color:red;
}

#color3{
  background-color:green;
}
#color4{
  background-color:yellow;
}
#color5{
  background-color:pink;
}

<div id="color1" class="bubble"></div>
<div id="color2" class="bubble"></div>
<div id="color3" class="bubble"></div>
<div id="color4" class="bubble"></div>
<div id="color5" class="bubble"></div>

【讨论】：

如果我运行 sn-p，我会看到纯色方块。
适用于火狐。使用供应商前缀来操作 chrome（请参阅已编辑的 sn-p）。 IE 不支持mask 和mix-blend-mode