首页 > 代码库 > 使用CSS将图片转换成黑白(灰色、置灰)

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

CSS3 greyscale 滤镜实现

效果如下:

技术分享

用滤镜实现hover 效果。

//dom节点

<img class="filter" src="http://www.mamicode.com/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%)‘);
});

 

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