使用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%)');
});

原文地址:https://www.cnblogs.com/RAINHAN/p/7219194.html