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

写在前面:有的场景中,当图片hover时需要彩色变黑白或者黑白变彩色。想要达到这一效果,可以使用CSS3中的灰度属性(filter)进行设置。 【CSS3小知识点(如何让彩色图片hover时变成黑白图片)】相关说明:
CSS3小知识点(如何让彩色图片hover时变成黑白图片)
文章图片


CSS3小知识点(如何让彩色图片hover时变成黑白图片)
文章图片


主要代码:

#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

    推荐阅读