如何为带有CSS/html或javascript的灰度图像添加颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (141)

有一个CP437 tileset:

想在网页上用作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方法可以做到这一点 - 你至少需要一些SVG魔法。例如可以定义过滤器。然而,确定颜色是很棘手的,因为它需要一些关于数学,矩阵以及计算机如何处理颜色的不那么重要的知识。

这是一个黄金图像的例子

.defs-only {
  display: none;
}

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">
用户回答回答于

也可以使用blend-modes但是因为图像是透明的,所以不幸的是,它也会将背景颜色应用于...背景,如果可以使用黑色背景获得相同的图像,将起作用

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

扫码关注云+社区

领取腾讯云代金券