如何使用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>