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

Question

我有一个 CP437 瓷砖集：

我想将其用作网页上的 CSS 精灵 目前，我有一个非常简单的标记和 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 来做到这一点？

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

澄清：

我希望能够使用精灵将这些内容绘制到浏览器窗口：

Answer 1

sepia您可以滥用过滤器可以使灰度输入饱和的事实：

.blue {
  filter: sepia(100%) hue-rotate(150deg) brightness(80%) saturate(420%);
}

.red {
  filter: sepia(100%) hue-rotate(300deg) brightness(80%) saturate(420%);
}

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

调整过滤器以获得所需的结果是很棘手的，但正如您在本示例中所看到的，这是可行的。

Answer 2

没有纯粹的 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">

例如，请查看本文以获取更多信息。