用css3实现图片变灰

在实现项目中判断用户在线还是离线的过程中，需要将离线用户的头像变灰，经过在网上资料的查找，发现有三种方法。

   第一，css3实现。

代码如下：

.gray{
-webkit-filter:grayscale(100%);
-o-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
}

此方法经测试后在firefox下没有效果。在IE和chrome下皆可实现效果。

第二，svg实现。

首先新建一个filters.svg文件，内容如下：