html - 着色部分透明的图像/背景

Question

如何为具有透明部分的背景图像着色？

我试过使用 background-blend-mode: multiply与 background-image和 background-color .它适用于不透明图像，但不考虑透明度，在图像周围留下一个彩色方 block 。

我正在使用 svg 图像，可以切换到使用 <img>必要时代替背景。

示例:左侧是我的目标，右侧是我用 background-blend-mode: multiply 得到的结果.基础图像是一个浅灰色圆圈，我将它与红色相乘。

编辑:我创建了一个 codepen 来更好地说明我的问题和我尝试过的方法。 http://codepen.io/anon/pen/QbbbpZ它上面有原始图像和我的目标(在 Photoshop 中制作)，下面是我尝试过的示例。

Edit2: 我开始怀疑是否可以使用纯 HTML/CSS 来做到这一点。使用像 Canvas 这样的东西，也许还有着色器，会更合适吗？那里有图书馆吗？

Answer 1

在 webkit(Safari、Chrome 和 Opera)中，您可以使用 -webkit-mask-image 来实现效果。

html:

<div id="blend-mask" class="uiElement uiBG"></div>

CSS:

#blend-mask {
  -webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
  background-color: #f00;
  background-blend-mode: multiply;
}

#goal {
  background-image: url("http://i.imgur.com/JLjAor5.png");
}

#pageBG {
  width: 400px;
  height: 400px;
  background-image: url("http://lorempixel.com/g/400/200/");
  background-color: rgba(255,0,0,0.25);
  background-blend-mode: multiply;
  color: white;
  text-shadow: 0 0 0.25em black;
}

.uiElement {
  width: 100px;
  height: 100px;
  margin: 25px;
  display: inline-block;
}

.uiBG {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("http://i.imgur.com/rkRJbzH.png");
}

示例工作: http://codepen.io/anon/pen/vONVry

如果你想让它在 firefox 中也能正常工作，请查看这篇文章可能会有所帮助:

Is there a -moz-mask CSS property, like -webkit-mask-image?

您也可以检查使用 Canvas 着色，这篇文章也许可以提供帮助: http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/