css中点击图片的变色

在网页中，我们常常需要让图片在被点击时显示不同的样式。这个需要用到CSS实现，下面我来介绍一下如何通过CSS点击图片变色。

//HTML代码
<img src="image.jpg" alt="图片">

//CSS代码
img:hover{
    filter: grayscale(100%);
    opacity: 0.5;
} 

如上代码所示，我们在CSS中使用:hover伪类来定义当鼠标悬停在图片上时要显示的样式。上述代码中定义了两个样式：filter和opacity。

filter是CSS3中的一个属性，用来指定与元素关联的滤镜效果。grayscale()函数可以将图片转换为灰色，其中的数字指定转换的程度，这里指定100%即为完全灰色。

opacity是CSS中的另一个属性，用来指定一个元素的透明度。这里将透明度设置为0.5，即为半透明状态。

这样，在鼠标悬停在图片上时，就会将图片转换为灰色，并且半透明，从而实现了点击图片变色的效果。

总之，通过CSS我们可以很方便地实现点击图片变色的效果，可在网页设计上增加互动效果，提高用户体验。