css如何让图片填充颜色

今天我们来讨论一下如何使用CSS让图片填充颜色。 首先，我们需要一个图片元素及其对应的CSS样式：

<img src="example.jpg" class="colored">

.colored {
  width: 500px;
  height: 500px;
}

接着，我们可以使用background-image属性以及filter属性来给图片加上颜色：

.colored {
  width: 500px;
  height: 500px;
  background-image: url(example.jpg);
  filter: hue-rotate(180deg);
}

上述代码中的hue-rotate(180deg)将会让图片的颜色旋转180度，也就是变成它的补色。 值得注意的是，我们需要将原始的img元素的display属性设置为none，这样才能使它“隐藏”，以免图片和它的背景颜色发生冲突：

.colored img {
  display: none;
}

最后，我们还可以使用CSS滤镜属性来进一步操控图片颜色，例如加强对比，饱和度等等。这里就不再讲解了。 以上是关于如何使用CSS让图片填充颜色的介绍，希望对您有所帮助！