CSS设置图片鼠标放上去时变红色

可以使用CSS的:hover伪类来实现鼠标放上去时图片变红色的效果。具体的CSS代码如下：

img:hover {
  filter: grayscale(100%) brightness(150%) saturate(150%);
}

上述代码中，filter属性用于设置图像的滤镜效果，grayscale(100%)用于将图像变为灰色，brightness(150%)用于增加图像的亮度，saturate(150%)用于增加图像的饱和度。这些效果的组合可以使图像变为红色。

相关问题

CSS设置当鼠标放上去的时候变成另一张图片

可以使用CSS的:hover伪类以及background-image属性来实现鼠标放上去时图片切换的效果。具体的CSS代码如下：

div {
  width: 200px;
  height: 200px;
  background-image: url("image1.jpg");
  background-size: cover;
  transition: background-image 0.5s ease;
}

div:hover {
  background-image: url("image2.jpg");
}

上述代码中，首先设置一个div元素，并将其背景图片设置为image1.jpg，当鼠标放上去时将背景图片切换为image2.jpg。这里使用了transition属性来实现平滑的过渡效果，使图片切换更加自然。注意，要将两张图片都放在与HTML文件相同的目录下，同时在CSS中正确设置图片的路径。

设置当鼠标放在图片上去为红色

要设置当鼠标放在图片上时，图片变为红色，可以使用CSS中的:hover伪类和background-color属性进行调整，如下所示：

img:hover {
  background-color: red;
}

在上面的示例中，我们使用:hover伪类，表示当鼠标放在img元素上时生效，并使用background-color属性将其背景颜色设置为红色。这样，当鼠标放在图片上时，图片的背景颜色就会变为红色。

需要注意的是，这种方法只适用于img元素的背景色，如果需要改变img元素本身的颜色，可以使用CSS中的filter属性或opacity属性进行调整。