CSS 更改图像颜色

在网页中使用图片是常见的，但程序员们可能会想要对这些图片进行一些视觉上的修改。使用 CSS 进行图像颜色的调整就是一种常见的需求。

方法

1. 使用滤镜

CSS filter 属性可以对元素的视觉效果进行修改。通过设置 filter 属性的值为 hue-rotate() 即可修改图像的颜色。

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

可以通过调整参数的值来改变图像的颜色。

2. 使用 SVG

可以使用 SVG 创建一个和原图像一样的图像，但是它具有更高的灵活性和控制性。通过修改 SVG 的 fill 属性可以改变图像的颜色。

<svg width="32" height="32" viewBox="0 0 32 32">
  <image xlink:href="path/to/image.png" width="32" height="32" />
  <filter id="solid">
    <feFlood flood-color="#ff0000" result="filter1" />
    <feComposite operator="atop" in="filter1" result="output1" />
    <feComposite operator="in" in2="SourceGraphic" in="output1" />
  </filter>
  <rect width="32" height="32" x="0" y="0" style="fill: #fff; filter: url(#solid);" />
</svg>

SVG 中使用 filter 元素创建一个滤镜，然后使用 rect 元素来替代原图像。因为 filter 属性和 background-color 属性不能同时使用，所以需要在 SVG 中创建一个填充色为白色的矩形。

结论

通过 CSS 的滤镜和 SVG 的 fill 属性，程序员们可以轻松地对图像进行颜色修改。这种方法可以用在很多场景中，例如在网站中展示不同的产品颜色、高亮重要内容等。

使用示例可参考代码仓库 CSS-Image-Colorization