css中鼠标放上去图片变颜色

CSS是网页样式设计的重要组成部分，鼠标放上去图片变颜色是网页中常用的一种交互设计。在CSS中如何实现这种效果呢？

img:hover {
    filter: brightness(70%);
}

上述代码中，使用:hover伪类选择器来表示当鼠标悬停在图片上时，应用该样式。filter属性指定应用图像效果，例如改变图像的亮度、饱和度、对比度、模糊度等等。在这里我们使用brightness图像效果，将其值设置为70%。这样当鼠标悬停在图片上时，图像的亮度将会变暗，呈现出一种变色的效果。

除了brightness图像效果之外，CSS中还有其他的图像效果可以用来实现图片的变色效果，例如saturate(对比度)、invert(反相)、grayscale(灰度)等等。选择不同的图像效果，可以呈现出不同的视觉效果。此外，CSS还支持使用图像、文本、背景等多个元素来实现鼠标放上去图片变颜色的效果。

总之，使用CSS来实现鼠标放上去图片变色是非常简单的，只需要选择合适的图像效果，设置好相应的样式即可。这种简单却有效的交互设计可以增强网页的用户体验，让用户在浏览网页时更加愉悦和舒适。