色调部分透明的图像/背景

Question

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

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

我正在使用svg图片，如果需要，可以切换到使用<img>而不是背景。

示例： 左边是我的目标，右边是我background-blend-mode: multiply得到的。基本图像是浅灰色圆圈，我将其乘以红色。

编辑：我创建了一个codepen来更好地说明我的问题以及我尝试过的内容。 http://codepen.io/anon/pen/QbbbpZ它有原始图像和我的目标（在Photoshop中制作），以及我在下面尝试过的示例。

编辑2：我开始怀疑是否可以使用纯HTML / CSS执行此操作。使用像帆布这样的东西，或许使用着色器，会更合适吗？那里有图书馆吗？

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/