如何使用CSS / HTML或JavaScript为灰度图像添加颜色？

Question

我有一个CP437 Tileset：

我想用作网页上的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执行此操作？

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

澄清：

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

Answer 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"> 

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

Answer 2

您也可以使用blend-modes但是由于图像是透明的，因此不幸的是，它也会将background-color应用于...背景。 如果可以在黑色背景下获得相同的图像，则可以使用。 混合模式的完整列表（如果在MDN可用），因此您可以使用不同的值进行播放。

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

 <div class="sprite"> 

Answer 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>