是否可以仅使用CSS为PNG的不透明部分着色？

Question

使用CSS（webkit过滤器以某种方式？），是否可以在保持透明背景的同时为整个PNG图像着色？

附图是我想要实现的一个例子。第一个PNG（左边的狗）是“未经处理的”。 PNG，右边的狗是带有相关CSS过滤器的PNG。

注意：我说＆＃39;过滤器＆＃39;但如果有不同的方法，我很乐意调查。

Answer 1

可以将图像设为黑色，但之后不能将其着色......因为您无法将颜色“添加”为灰色。

支持：Chrome 18（前缀），FF35，Opera（前缀），Safari 6（前缀）。

参见兼容性图表@ MDN

img {
  width: 500px;
  -webkit-filter: contrast(0) brightness(0);
  filter: contrast(0) brightness(0);
}

<img src="http://images.clipartpanda.com/dog-clipart-puppy_dog_with_bone.png" alt="">