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

2023年1月28日 238次阅读

我有一个CP437 tileset：

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

我想在网页上用作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完成此操作？

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

澄清：

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

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

最佳答案 没有纯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.

点赞