css怎么改变图片颜色

CSS改变图片颜色

利用CSS的filter属性，可以对图片实现色彩转换。filter属性可用于元素的图形效果，例如转变元素的颜色、模糊、锐化或透明度等。

下面是实现图片变灰的代码示例：

img {
  filter: grayscale(100%);
}

上面的代码将图片的颜色转换为灰色。grayscale()函数对应的值是图片的转换程度，这里是100%。

下面是实现图片变红的代码示例：

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

上面的代码是通过hue-rotate()函数来旋转图片的颜色值。90deg代表图片的颜色值逆时针旋转90度，即变成红色。

下面是实现载入图片时变色的代码示例：

img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

上面的代码实现了当图片载入时变成灰色，鼠标移动到图片上时恢复原色。这里使用了:hover伪类实现鼠标移入移出效果。-webkit-transition和transition设置过渡时间，.3s代表过渡的时间为0.3秒，ease-in-out代表过渡效果为先加速后减速。