css - 将黑白图像转换为双色调的 ColorMatrix CSS 过滤器

Question

我需要创建一个自定义 CSS 过滤器，将黑白图像转换为具有两种自定义颜色的双色图像。

我想以这种方式应用过滤器(不确定这种语法是否可行，可能必须单独传递 6 个参数):

.duotone {
    -webkit-filter: custom(none url(/filters/duotone.fs),
        black_color [255, 0, 0] white_color [255, 192, 203]);
}

因此在这种情况下黑色被红色替换，白色和透明颜色(背景)都被粉红色替换，所有灰色阴影都被中间的颜色替换(使用直线曲线)。

也许甚至可以在没有外部文件的情况下在 CSS 中定义过滤器？

此过滤器的应用是在运行时将黑色/白色图标转换为彩色图标。

关于如何做的例子很少，this one非常通用，涵盖范围更广的过滤器和 specification也不是那么容易理解。

有人可以发布一个可以执行此操作或类似操作的过滤器吗？或者至少您可以向我指出一些与我的情况相关的更有针对性的 ColorMatrix 应用示例。

Answer 1

更新:

为此，您需要在 CSS 上使用 -webkit-mask-image。这曾经只是一个 webkit，但现在是 w3c css3。

webkit 仅提供支持。为了保持向后兼容性并显示常规的黑色图标，您需要确定浏览器是否具有此功能。我已经使用 modernizr 存档了.

http://jsfiddle.net/kkobold/Zq5FZ/5/

旧答案:

I believe thats the result you are looking for:

http://s7.postimage.org/vo5v33tuj/Screen_Shot_2013_02_03_at_11_28_46_PM.png

you can archive it by filtering to sepia and then changing hue degree. different combinations will give different results. But a simple color picker can be made for the hue and a slide for sepia to increase or decrease intensity of the color change.

and CSS3 only.

<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.0) hue-rotate(0deg);" width="300"/><br />
-webkit-filter: sepia(0) hue-rotate(0deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(50deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(50deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(100deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(100deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(150deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(150deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(200deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(200deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(250deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(250deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(300deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(300deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(350deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(350deg);
</div>