CSS中的双色调（Duotone）滤镜：利用SVG Filter与CSS混合模式实现

CSS中的双色调（Duotone）滤镜：利用SVG Filter与CSS混合模式实现

大家好，今天我们要深入探讨一个有趣且强大的CSS技巧：双色调（Duotone）滤镜。双色调滤镜是一种将图像转换为仅包含两种颜色的视觉效果，它能够创造出独特的艺术风格，提升网站的视觉吸引力。虽然CSS本身没有直接提供双色调滤镜，但我们可以巧妙地利用SVG Filter和CSS混合模式来实现这一效果。

1. 双色调滤镜的原理

在深入实现之前，我们需要理解双色调滤镜的基本原理。简单来说，它将图像中的每个像素的颜色值映射到两种目标颜色中的一种。这种映射通常基于像素的亮度值，亮度较高的像素会映射到第一种颜色，亮度较低的像素会映射到第二种颜色，或者根据预设的阈值进行判断。

传统图像处理软件通常使用算法来实现这种映射，但在Web开发中，我们可以利用SVG Filter的强大功能来模拟这一过程。

2. 使用SVG Filter实现双色调

SVG Filter提供了一系列用于图像处理的元素，我们可以利用这些元素来创建双色调效果。其中，<feColorMatrix>元素是关键，它可以对图像的颜色进行矩阵变换。

一个最简单的双色调滤镜可以使用两个 <feColorMatrix> 元素来实现：一个用于提取图像的亮度信息，另一个用于将亮度信息映射到目标颜色。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top: -9999px;">
  <defs>
    <filter id="duotone">
      <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0 0 0 1 0" />
      <feComponentTransfer color-interpolation-filters="sRGB">
        <feFuncR type="table" tableValues="0 1" />
        <feFuncG type="table" tableValues="0 1" />
        <feFuncB type="table" tableValues="0 1" />
      </feComponentTransfer>
      <feColorMatrix type="matrix" values="1 0 0 0 0
                                            0 0 0 0 1
                                            0 0 0 0 0
                                            0 0 0 1 0" />
    </filter>
  </defs>
</svg>

• <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0 ...">: 这个元素将图像转换为灰度图像。values 属性定义了一个 4×5 的矩阵，用于颜色变换。0.299 0.587 0.114 是标准的亮度转换系数，分别对应红色、绿色和蓝色通道。
• <feComponentTransfer>: 这个元素允许你使用查找表（tableValues）来重新映射颜色分量。在这里，我们将每个颜色分量（R、G、B）映射到 0 或 1，从而创建黑白图像。
• <feColorMatrix type="matrix" values="1 0 0 0 0 ...">: 这个元素将灰度图像的亮度值映射到目标颜色。在这个例子中，它将亮度值映射到红色和绿色，从而创建一种红色和绿色的双色调效果。

这段代码的效果是将图像转换为黑白图像，然后用红色和绿色来着色。但这并不是真正的双色调，仅仅是一个开始。为了实现真正的双色调，我们需要更精细的控制颜色映射。

3. 更精细的双色调控制：使用两个颜色

为了实现更灵活的双色调效果，我们需要能够指定两种不同的颜色。我们可以通过组合多个 <feColorMatrix> 元素来实现这一点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top: -9999px;">
  <defs>
    <filter id="duotone-custom">
      <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0 0 0 1 0" result="gray"/>
      <feComponentTransfer in="gray" result="componentTransfer">
        <feFuncR type="table" tableValues="0 1"/>
        <feFuncG type="table" tableValues="0 1"/>
        <feFuncB type="table" tableValues="0 1"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
      <feColorMatrix type="matrix" values="0 0 0 0 #color1_r
                                            0 0 0 0 #color1_g
                                            0 0 0 0 #color1_b
                                            0 0 0 1 0" in="componentTransfer" result="color1"/>
      <feColorMatrix type="matrix" values="0 0 0 0 #color2_r
                                            0 0 0 0 #color2_g
                                            0 0 0 0 #color2_b
                                            0 0 0 1 0" in="SourceGraphic" result="color2"/>
      <feBlend mode="multiply" in="color1" in2="color2"/>
    </filter>
  </defs>
</svg>

在这个例子中：

• #color1_r, #color1_g, #color1_b 和 #color2_r, #color2_g, #color2_b 是占位符，代表第一种和第二种颜色的红色、绿色和蓝色分量。我们需要在CSS中动态地设置这些值。
• <feBlend mode="multiply">： 这个元素将两种颜色混合在一起，创造出双色调效果。multiply 混合模式会将两种颜色的对应分量相乘，从而产生更深的颜色。

4. 使用CSS变量控制颜色

为了使双色调滤镜更加灵活，我们可以使用CSS变量来控制颜色。我们需要在SVG中定义占位符，然后在CSS中使用--前缀的变量来设置这些占位符的值。

.duotone-image {
  filter: url("#duotone-custom");
  --color1-r: 255; /* Red color component */
  --color1-g: 0;   /* Green color component */
  --color1-b: 0;   /* Blue color component */
  --color2-r: 0;   /* Red color component */
  --color2-g: 0;   /* Green color component */
  --color2-b: 255;  /* Blue color component */
}

现在，我们需要修改SVG代码，将占位符替换为CSS变量：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top: -9999px;">
  <defs>
    <filter id="duotone-custom">
      <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0.299 0.587 0.114 0 0
                                            0 0 0 1 0" result="gray"/>
      <feComponentTransfer in="gray" result="componentTransfer">
        <feFuncR type="table" tableValues="0 1"/>
        <feFuncG type="table" tableValues="0 1"/>
        <feFuncB type="table" tableValues="0 1"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
      <feColorMatrix type="matrix" values="0 0 0 0 var(--color1-r)
                                            0 0 0 0 var(--color1-g)
                                            0 0 0 0 var(--color1-b)
                                            0 0 0 1 0" in="componentTransfer" result="color1"/>
      <feColorMatrix type="matrix" values="0 0 0 0 var(--color2-r)
                                            0 0 0 0 var(--color2-g)
                                            0 0 0 0 var(--color2-b)
                                            0 0 0 1 0" in="SourceGraphic" result="color2"/>
      <feBlend mode="multiply" in="color1" in2="color2"/>
    </filter>
  </defs>
</svg>

注意：CSS变量需要通过var()函数在SVG中使用。

5. 完整的HTML结构

<!DOCTYPE html>
<html>
<head>
  <title>Duotone Filter Example</title>
  <style>
    .duotone-image {
      filter: url("#duotone-custom");
      --color1-r: 255;
      --color1-g: 0;
      --color1-b: 0;
      --color2-r: 0;
      --color2-g: 0;
      --color2-b: 255;
      width: 300px; /* Adjust as needed */
      height: auto;
    }
  </style>
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top: -9999px;">
    <defs>
      <filter id="duotone-custom">
        <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0
                                              0.299 0.587 0.114 0 0
                                              0.299 0.587 0.114 0 0
                                              0 0 0 1 0" result="gray"/>
        <feComponentTransfer in="gray" result="componentTransfer">
          <feFuncR type="table" tableValues="0 1"/>
          <feFuncG type="table" tableValues="0 1"/>
          <feFuncB type="table" tableValues="0 1"/>
          <feFuncA type="identity"/>
        </feComponentTransfer>
        <feColorMatrix type="matrix" values="0 0 0 0 var(--color1-r)
                                              0 0 0 0 var(--color1-g)
                                              0 0 0 0 var(--color1-b)
                                              0 0 0 1 0" in="componentTransfer" result="color1"/>
        <feColorMatrix type="matrix" values="0 0 0 0 var(--color2-r)
                                              0 0 0 0 var(--color2-g)
                                              0 0 0 0 var(--color2-b)
                                              0 0 0 1 0" in="SourceGraphic" result="color2"/>
        <feBlend mode="multiply" in="color1" in2="color2"/>
      </filter>
    </defs>
  </svg>

  <img class="duotone-image" src="your-image.jpg" alt="Duotone Image">

</body>
</html>

请确保将 your-image.jpg 替换为你的图像文件的实际路径。

6. 使用JavaScript动态修改颜色

我们还可以使用JavaScript动态修改双色调滤镜的颜色。这允许我们在用户交互时改变颜色，创造更丰富的用户体验。

const image = document.querySelector('.duotone-image');

function changeColors(color1, color2) {
  image.style.setProperty('--color1-r', color1.r);
  image.style.setProperty('--color1-g', color1.g);
  image.style.setProperty('--color1-b', color1.b);
  image.style.setProperty('--color2-r', color2.r);
  image.style.setProperty('--color2-g', color2.g);
  image.style.setProperty('--color2-b', color2.b);
}

// Example usage:
changeColors({ r: 0, g: 255, b: 0 }, { r: 255, g: 0, b: 255 }); // Green and Magenta

这段代码定义了一个 changeColors 函数，它接受两个颜色对象作为参数，每个颜色对象包含红色、绿色和蓝色分量。该函数使用 setProperty 方法来更新CSS变量的值，从而改变双色调滤镜的颜色。

7. 优化和注意事项

• 性能: SVG Filter可能会影响性能，特别是对于大型图像或复杂的滤镜。因此，尽量简化滤镜，并避免在动画中使用。
• 浏览器兼容性: 确保你的目标浏览器支持SVG Filter和CSS变量。
• 可访问性: 为应用了双色调滤镜的图像提供适当的替代文本，以确保可访问性。

8. 混合模式 (Blend Modes) 的进一步应用

虽然上面的例子使用了 multiply 混合模式，但实际上，我们可以尝试不同的混合模式来获得不同的视觉效果。例如，screen 混合模式会使图像更亮，而 overlay 混合模式会根据底色的亮度来调整混合颜色。

以下是一些常用的混合模式及其效果：

混合模式	效果
multiply	将顶层颜色和底层颜色相乘。结果颜色始终比原始颜色深。黑色乘以任何颜色都保持黑色，白色乘以任何颜色都保持不变。
screen	将顶层颜色的反色和底层颜色的反色相乘。结果颜色始终比原始颜色浅。黑色遮蔽任何颜色都保持不变，白色遮蔽任何颜色都保持白色。
overlay	根据底层颜色调整顶层颜色。如果底层颜色较浅，则顶层颜色会变亮；如果底层颜色较深，则顶层颜色会变暗。
darken	比较顶层颜色和底层颜色，并选择较深的颜色。
lighten	比较顶层颜色和底层颜色，并选择较浅的颜色。
color-dodge	根据底层颜色，加亮顶层颜色。底层颜色越浅，顶层颜色加亮的越多。如果底层颜色是黑色，则不会产生任何变化。
color-burn	根据底层颜色，加深顶层颜色。底层颜色越深，顶层颜色加深的越多。如果底层颜色是白色，则不会产生任何变化。

尝试不同的混合模式，看看哪种效果最适合你的设计。

9. 使用 LUT (Lookup Table) 实现更复杂的颜色映射

除了使用 <feColorMatrix> 和 <feComponentTransfer>，我们还可以使用 LUT (Lookup Table) 来实现更复杂的颜色映射。LUT 是一种预先计算好的颜色映射表，它可以将图像中的每个颜色值映射到新的颜色值。

虽然直接在SVG Filter中使用LUT比较复杂，但我们可以借助一些工具或库来生成LUT，然后将其转换为 <feComponentTransfer> 的 tableValues。这可以实现非常精细的颜色控制，甚至可以模拟胶片效果。

代码实现较为复杂，这里提供一个概念性的描述。首先，你需要一个LUT图像（通常是一个包含颜色渐变的图像），然后使用JavaScript或图像处理软件将其转换为颜色值数组。最后，将这些颜色值数组应用到 <feComponentTransfer> 的 tableValues 中。

这种方法需要更深入的图像处理知识，但它可以提供更强大的双色调效果。

总结来说，使用SVG Filter和CSS混合模式可以实现强大的双色调滤镜效果。通过CSS变量，我们可以动态地控制滤镜的颜色，从而创造出丰富的视觉效果。理解双色调滤镜的原理和SVG Filter的用法是关键，希望今天的讲解能帮助大家更好地掌握这一技术。

灵活应用SVG Filter，实现创意视觉效果

通过结合 SVG Filter 的强大功能与 CSS 变量的灵活性，我们能轻松地创建和定制双色调滤镜，为网站带来独特的视觉风格。 深入了解图像处理原理和不同混合模式的效果，可以帮助我们更好地利用这些工具，创造出更具创意的视觉体验。

更多IT精英技术系列讲座，到智猿学院