CSS – 使用滤镜为黑白 PNG 图像添加颜色

在本文中，我们将介绍如何使用 CSS 滤镜为黑白 PNG 图像添加颜色。滤镜是一种强大的 CSS 属性，通过对图像应用不同的滤镜效果，我们可以改变图像的颜色，对比度和亮度等属性，从而实现各种视觉效果。

阅读更多：CSS 教程

什么是滤镜

滤镜是一种 CSS 属性，它可以在元素的渲染过程中对其进行处理。在这里，我们主要关注用于处理图像的滤镜效果。滤镜可以改变图像的颜色、对比度、亮度以及其他属性，从而实现各种视觉效果。

CSS 滤镜属性

在 CSS 中，我们使用 filter 属性来应用滤镜效果。filter 属性可以接受多个值，每个值代表一个滤镜效果。以下是一些常用的滤镜效果以及它们的简单示例：

blur(): 模糊图像
```
.blur-image {
 filter: blur(5px);
}
```

brightness(): 调整图像的亮度

.bright-image {
 filter: brightness(150%);
}

contrast(): 调整图像的对比度

.contrast-image {
 filter: contrast(150%);
}

grayscale(): 将图像转为灰度图像

.grayscale-image {
 filter: grayscale(100%);
}

sepia(): 将图像转为深褐色图像
```
.sepia-image {
 filter: sepia(100%);
}
```

为黑白 PNG 图像添加颜色

要为黑白 PNG 图像添加颜色，我们可以使用 url() 函数和 element() 函数结合使用。首先，我们将黑白 PNG 图像作为背景图像应用于元素，然后使用 element() 函数将元素作为滤镜的输入。接下来，我们可以通过调整滤镜的属性来为图像添加颜色。以下是一个示例：

/* HTML 代码 */
<div class="colorful-image"></div>

/* CSS 代码 */
.colorful-image {
  width: 300px;
  height: 300px;
  background-image: url('blackwhite.png');
  filter: url('#color-filter');
}

/* SVG 代码 */
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <filter id="color-filter">
    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0"
    />
  </filter>
</svg>

在上面的示例中，我们首先将 blackwhite.png 图像作为背景图像应用于 .colorful-image 元素。然后，我们使用 <filter> 元素创建了一个名为 color-filter 的滤镜。滤镜通过 <feColorMatrix> 元素来实现，该元素可以通过矩阵来调整图像的颜色。在示例中，矩阵的值是单位矩阵，表示不对图像进行任何颜色调整。您可以通过修改矩阵的值来实现不同的颜色效果。

总结

在本文中，我们介绍了如何使用 CSS 滤镜为黑白 PNG 图像添加颜色。滤镜是一种强大的 CSS 属性，可以改变图像的颜色、对比度、亮度等属性，从而实现各种视觉效果。通过将黑白 PNG 图像作为背景图像应用于元素，并使用滤镜来调整图像的颜色，我们可以轻松地为图像添加颜色。希望本文对您有所帮助，谢谢阅读！