利用SVG和滤镜分别实现：
<style type="text/css">img{
-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)
filter: grayscale(100%)
filter: url("data:image/svg+xmlutf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}
img:hover{
-webkit-filter: grayscale(0)
-moz-filter: grayscale(0)
-ms-filter: grayscale(0)
-o-filter: grayscale(0)
filter: grayscale(0)
filter: url("data:image/svg+xmlutf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale")
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)
}
</style>
首先你要确定，你的灰色背景不是图片自带的。在这个前提下，你可以通过浏览器（在浏览器页面按F12，然后点击灰色背景）找到这个灰色背景的标签。然后你会看到background：#xxxxxx这个样式。然后你看下，这个样式右上角会有个名称和数字，分别代表这个样式在什么样式表和第几行。然后你找到这个位置，把这个样式改成bakground:none；或者你需要的颜色就可以了
