4

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

我想以这种方式应用过滤器（不确定这种语法是否可行，可能需要单独传递 6 个参数）：

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

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

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

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

关于如何做到这一点的例子很少，这个非常通用，涵盖了更广泛的过滤器，规范也不是那么容易理解。

有人可以发布一个工作过滤器来做这个或类似的事情吗？或者至少你可以给我指出一些与我的情况相关的更集中的 ColorMatrix 应用示例。

4

2 回答 2

3

更新：

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

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

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

旧答案：

我相信这就是您正在寻找的结果：

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

您可以通过过滤到棕褐色然后更改色调度来将其存档。不同的组合会产生不同的结果。但是可以为色调制作一个简单的颜色选择器，为棕褐色制作一个幻灯片，以增加或减少颜色变化的强度。

和 CSS3。

<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>
于 2013-02-04T01:32:45.123 回答
3

在这里聚会有点晚了，但我已经为您构建了一个 CSS 自定义过滤器，它完全符合您的要求。所有代码都可以在 GitHub 上找到：https ://github.com/awgreenblatt/css-custom-filters/tree/master/duotone

由于安全限制，自定义过滤器无法读取像素；他们只能对他们应用转换。因此，例如，过滤器不能说，如果像素是黑色的，则将其更改为红色。但是，仍然有办法做到这一点。

每个颜色分量的范围为 [0,1]：源图像中的所有白色像素将为 (1, 1, 1, 1)，源图像中的所有黑色像素将为 (0, 0, 0, 1)

让我们调用您想要将黑色映射到的颜色：(br, bg, bb, 1) 和您想要将白色映射到的颜色：(wr, wg, wb, 1)

您可以在片段着色器中定义一个 css_ColorMatrix，它将对源图像应用变换。如果我们将混合模式设置为“乘”，那么 css_ColorMatrix 将与当前源图像的颜色相乘。

因此，我们将 css_ColorMatrix 设置为：

wr - br,       0,       0,     0,
      0, wg - bg,       0,     0,
      0,       0, wb - bb,     0,
     br,      bg,      bb,     1

如果源像素是黑色的 (0, 0, 0, 1)，那么乘法的结果将是 (br, bg, bb, 1) 如果源像素是白色 (1, 1, 1, 1)，那么乘法的结果将是

((wr - br + br), (wg - bg + bg), (wb - bb + bb), 1) 或 (wr, wg, wb, 1)

这是片段着色器源：

precision mediump float;

uniform vec3 black;
uniform vec3 white;

// Main

void main()
{
  vec3 b = black / 255.0;
  vec3 w = white / 255.0;

  css_ColorMatrix = mat4(w.r-b.r, 0.0, 0.0, 0.0,
                         0.0, w.g - b.g, 0.0, 0.0,
                         0.0, 0.0, w.b - b.b, 0.0,
                         b.r, b.g, b.b, 1.0);
}

顶点着色器只是默认设置：

precision mediump float;

// Built-in attributes

attribute vec4 a_position;

// Built-in uniforms

uniform mat4 u_projectionMatrix;

// Main

void main()
{
  gl_Position = u_projectionMatrix * a_position;
}

然后您按如下方式应用过滤器：

-webkit-filter: custom(url(duotone.vs) mix(url(duotone.fs) normal source-atop), 
             1 1 border-box, black 255 0 0, white 255 192 203);
于 2013-05-30T05:38:49.633 回答