典型的不考虑兼容性的 css。
给你个兼容全部的吧：（做一次授人鱼）
img{-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)
filter: grayscale(100%)
filter: gray
}
来源于 小tip: 使用CSS将图片转换成黑白(灰色、置灰) « 张鑫旭-鑫空间-鑫生活
题主可以看这个
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
}
使用css的color属性可以更改字体颜色。color用法如下:color 属性规定文本的颜色。这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。要设置一个元素的前景色，最容易的方法是使用 color 属性。可能的值规定颜色值为颜色名称的颜色（比如 red）。规定颜色值为十六进制值的颜色（比如 #ff0000）。规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。inherit,规定应该从父元素继承颜色。举例：body{color:red}将页面所有文字设置为红色。
