CSS图片变灰

自己标记一下，网上找了一些，自己又综合了一下，不能全部支持。

.gray{
-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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: gray;
    -webkit-transform: translateZ(0);
}

<img src="http://www.google.com.hk/images/srpr/logo4w.png" class="gray"/>

　　

除了ie之外，其他都是用当时的最新的浏览器，有以下几个：FF，Chrome，Opera，遨游，流氓

FF：支持

Chrome：支持

Opera：不支持

遨游：支持

流氓：支持（我个人是坚决不想支持流氓的，但是业务说要支持，因为流氓现在在天朝用的挺多，奇葩的天朝啊）

IE：支持10以下版本，搜了一下，貌似是本来低版本都有独特的hack，到了10没有了，但是10所支持的滤镜跟低版本又不太相同，对微软无语，如果不是开发，真的支持把IE也打死，这样前段人员就少死好多人。

嗯，有用的着的尽管拿走，但要记得心存感激。