通过css3的filter滤镜改变png图片的颜色的示例代码

下面就是通过 CSS3 的 filter 滤镜改变 PNG 图片的颜色的完整攻略：

1. 确定要改变颜色的 PNG 图片

在网页中，我们常常需要使用 PNG 图片，并且有时候需要调整它们的颜色。这时候，我们可以通过 CSS3 的 filter 滤镜来实现。

首先，我们需要确定需要改变颜色的 PNG 图片。此处我们举一个例子：

<img src="example.png" alt="example">

2. 给 PNG 图片添加 CSS 样式

接下来，我们可以给 PNG 图片添加 CSS 样式，通过 filter 滤镜来改变它们的颜色。具体代码如下：

img {
  filter: hue-rotate(90deg);
}

上面的示例代码就是通过 hue-rotate 滤镜将 PNG 图片的颜色偏移 90 度，从而实现变化。

另外一个示例代码是使用 sepia 滤镜，使 PNG 图片变成暖色调：

img {
  filter: sepia(100%);
}

3. 浏览器兼容性问题

需要注意的是，不同浏览器对 CSS3 的 filter 滤镜支持程度可能不同。但是，因为大多数现代浏览器都很好地支持了 CSS3，因此我们可以放心使用这些滤镜效果。

另外，如果我们需要兼容旧版本的 IE 浏览器，我们可以使用一些 polyfill 插件来实现 filter 滤镜的效果。

总结

通过上面的攻略，我们可以看出，通过 CSS3 的 filter 滤镜来改变 PNG 图片的颜色非常简单。只需要两步操作，就可以实现图片颜色的变化。当然，我们在遇到一些特殊的滤镜效果时，可能还需要更多的操作和实践。