纯CSS将图片转换成黑白

纯CSS将图片转换成黑白

几行代码就可以实现！效果非常好！

---

1. 正常效果截图

鼠标悬停前后，分别示下：

---

2. 非正常效果截图：代码设置的不同，显示的效果不同！

比如：下面的设置导致图片效果不好！

参数：brightness属性值的设置，影响img图片的灰色程度，进而直接影响图片在页面中的显示效果。

---

3. CSS代码如下：

.partners-list li a i {
	-webkit-filter: grayscale(100%) brightness(1) contrast(.5);
	-moz-filter: grayscale(100%) brightness(1) contrast(.5);
	-ms-filter: grayscale(100%) brightness(1) contrast(.5);
	-o-filter: grayscale(100%) brightness(1) contrast(.5);
	filter: grayscale(100%) brightness(1) contrast(.5);
	-webkit-filter: grey opacity(.5);
	filter: grey opacity(.5)
}

.partners-list li a:hover i {
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-ms-filter: grayscale(0);
	-o-filter: grayscale(0);
	filter: grayscale(0)
}

---

以上就是关于“ CSS将图片转换成黑白 ” 的全部内容。