Css中将图片调为灰色，是利用滤镜的效果进行渲染的
不同的浏览器需要不同的前缀进行支持。
具体将图片调整为灰色的代码如下
img {filter: grayscale(100%) //默认
-webkit-filter: grayscale(100%) //谷歌浏览器
-moz-filter: grayscale(100%) //火狐浏览器
-ms-filter: grayscale(100%) //IE核心浏览器
-o-filter: grayscale(100%) //Oprea浏览器
-webkit-transition:all 1s ease-in-out //这是设置过渡时间效果，有一个缓冲时间
-o-transition:all 1s ease-in-out
-moz-transition:all 1s ease-in-out
-ms-transition:all 1s ease-in-out
}
若需要调整为彩色
img：hover{
filter: grayscale(0%) //默认
-webkit-filter: grayscale(0%) //谷歌浏览器
-moz-filter: grayscale(0%) //火狐浏览器
-ms-filter: grayscale(0%) //IE核心浏览器
-o-filter: grayscale(0%) //Oprea浏览器
-webkit-transition:all 1s ease-in //这是设置过渡时间效果，有一个缓冲时间
-o-transition:all 1s ease-in
-moz-transition:all 1s ease-in
-ms-transition:all 1s ease-in
}
首先你要确定，你的灰色背景不是图片自带的。在这个前提下，你可以通过浏览器（在浏览器页面按F12，然后点击灰色背景）找到这个灰色背景的标签。然后你会看到background：#xxxxxx这个样式。然后你看下，这个样式右上角会有个名称和数字，分别代表这个样式在什么样式表和第几行。然后你找到这个位置，把这个样式改成bakground:none；或者你需要的颜色就可以了
这个是需要应用css的滤镜来实现的，但是只有IE浏览器支持。
代码实例如下：
<html><head>
<title>Gray灰度</title>
<style>
<!--
body{
margin:12px
}
.gray{
filter:gray /* 黑白图片 */
}
-->
</style>
</head>
<body>
<img src="building5.jpg"> 
<img src="building5.jpg" class="gray">
</body>
</html>
