CSS3小知识点:如何让彩色图片hover时变成黑白图片

写在前面:有的场景中,当图片hover时需要彩色变黑白或者黑白变彩色。想要达到这一效果,可以使用CSS3中的灰度属性(filter)进行设置。

相关说明:

CSS3小知识点:如何让彩色图片hover时变成黑白图片_第1张图片


主要代码:

#rencai .partner>div{height: 60px;filter: grayscale(100%);}
#rencai .partner>div:hover{filter: grayscale(0);cursor:pointer;}

写在最后:除此之外,filter还可以设置图片模糊等其他属性,了解更多请查看:http://www.runoob.com/try/try.php?filename=trycss_ex_images_filters

你可能感兴趣的:(CSS3)