使用CSS将图片转换成黑白(灰色、置灰)

CSS3 greyscale 滤镜实现

效果如下：

用滤镜实现hover 效果。

//dom节点

<img class="filter" src="img/index/hx2.png">

css设置图片滤镜为灰色

.filter{
　　filter: grayscale(100%);
}

用jq实现hover效果

$(".filter").hover(function() {
　　$(this).css('filter','grayscale(0%)');
}, function() {
　　$(this).css('filter','grayscale(100%)');
});