纯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将图片转换成黑白 ” 的全部内容。