使用CSS快速更改PNG图像的颜色「两种方法」

1.前言

在网页设计中，我们经常会使用PNG图片。PNG图片原本是带有透明背景的，但是当我们需要更改PNG图片的颜色时，可能会遇到一些问题。在这篇文章中，我将会介绍两种方法使用CSS来快速更改PNG图像的颜色。

2.方法一：使用Filter

2.1 Filter基础概念

Filter是一组CSS属性，它可以更改网页上元素的外观。这些属性可以用于改变颜色、调整亮度和对比度、应用高斯模糊、添加阴影等。Filter属性是一种类似于传统图形软件（如Photoshop）的图形效果应用方法。

Filter属性被广泛支持，支持程度接近100%的是webkit、Gecko和Opera。在IE6~IE9中则没有Filter的支持。

2.2 Filter属性的使用方法

首先，我们需要选择需要更改颜色的PNG图像：

img {
    filter: invert(100%);
}

在上面的示例代码中，我选择了一个PNG图像，并将其反转了100%。效果就是将原本的黑色部分变成了白色：

但是我们并不只能改变PNG图像的颜色，还可以进行更多操作，例如变亮、变暗、应用高斯模糊等：

img {
    filter: brightness(0.3);
    /*亮度减小到30%*/
}

img {
    filter: contrast(200%);
    /*对比度增加到200%*/
}

img {
    filter: blur(3px);
    /*高斯模糊半径为3px*/
}

3.方法二：使用SVG和filter元素

3.1 SVG基础概念

SVG是可缩放矢量图形，是一种基于XML的格式。SVG与PNG不同，它是矢量的。这意味着SVG图像可以更改大小而不会失去质量。

SVG图像也可以使用CSS进行样式更改，包括颜色和滤镜效果。

3.2 filter元素的使用方法

filter元素是SVG中用于应用滤镜效果的元素，它可以实现和CSS的filter属性类似的功能。

首先，我们需要在HTML中嵌入一个SVG图像。要使用filter元素，我们需要在SVG元素内添加一个filter元素：

<svg width="0" height="0">
    <filter id="currentColor">
        <feColorMatrix type="matrix" values="0 0 0 0 1
                                             0 0 0 0 0
                                             0 0 0 0 0
                                             0 0 0 1 0"/>
    </filter>
</svg>

在上面的示例代码中，我创建了一个宽度和高度都为0的SVG元素，并在其中嵌入了一个filter元素。filter元素的id被设置为currentColor（可以自己定义名称），这个id会在接下来的CSS中使用。

在filter元素内，使用了一个feColorMatrix元素，用于改变PNG图像中的颜色。但是feColorMatrix元素的工作方式比较复杂，需要根据自己的需要进行修改。在这篇文章中，我们只需要知道values属性中的数值可以更改PNG图像的颜色即可。

下面是一个将PNG图像中的黑色部分替换为橙色的示例代码：

img {
    /*匹配嵌入的SVG元素中id为currentColor的filter*/
    filter: url(#currentColor);
}
#currentColor feColorMatrix {
    /*将黑色颜色（#000000）替换为橙色（#FFA500）*/
    values: 0 0 0 0 1
            0 0 0 0 0
            0 0 0 0 0
            0 0 0 1 0;
}

4.总结

本文分别介绍了使用CSS filter属性和SVG filter元素来更改PNG图像颜色的方法。其中，CSS的filter属性更加简单易用，但是浏览器的支持程度有限。而SVG的filter元素则相对复杂，但可以实现更加复杂的效果，并且支持程度也比较高。

无论是哪种方法，都可以很好地应用在网页设计中，让我们的设计更加有创意。