使用CSS將圖片轉換成黑白(灰色、置灰)

標籤：log   img   灰色   .com   濾鏡   黑白   index   on()   hover   

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%)‘);
});

 

使用CSS將圖片轉換成黑白(灰色、置灰)