如何实现?
- 添加以下CSS即可实现网页全局变黑白
//以下参考淘宝实现方式
body, html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
- 演示效果:
image.png
上述方法优缺点介绍?
-
优点:
- 实现简单,直接
CSS即可实现需求,且兼容IE低版本IE8~9
- 实现简单,直接
-
缺点:
- 不兼容
IE10~11
- 不兼容
-
如何解决不兼容的问题?
- 使用
grayscale.js - 了解grayscale.js(这个库很老了,暂时未找到更好的方案)
- 将两者结合起来使用就可以,达到最多的兼容性效果
<style> body, html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } </style> <script type="text/javascript" src="js/grayscale.js" ></script> <script type="text/javascript"> var navStr = navigator.userAgent.toLowerCase(); // 如果是IE10或者IE11,启用 if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ grayscale(document.body); } </script> - 使用
css实现的原理
-
CSS实现就是给元素添加上滤镜,达到黑白的效果 - filter属性介绍(1)
- filter属性介绍(2)
总结
grayscale.js虽然能实现IE10~11黑白的兼容性问题,不过如果网页本身图片过多或者网站本身要求高速的访问速度,不推荐使用grayscale.js最佳方案:就直接使用
css实现即可,这样对网页不会有任何影响,至于余下的兼容性,可以不考虑,如果要考虑的话,可以将显眼的地方使用黑白图片代替,参考B站做法:
image.png
