css中如何利用一套彩色图片实现鼠标移动上去更换图片同时放大放小

鼠标没有移动上去 鼠标移动上去

很多人觉得如果要实现上面的效果，一定需要两组图片，但是事实上一组图片就可以实现上面的效果；这里需要用到我的css中的filter属性：CSS的灰度滤镜上

话不多说，直接贴代码：

img {filter:grayscale(100%);opacity:0.66;width:160px;}img:hover {filter: none;opacity:1;}只需要这一行代码即可；

但是需要注意的是filter:grayscale在不通浏览器中的兼容：如何解决跨浏览器图像灰度(grayscale)：详见：https://blog.csdn.net/whqet/article/details/22737149