网页实现变黑白的方法

如何实现?

1. 添加以下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);
}

2. 演示效果:

image.png

上述方法优缺点介绍?

• 优点:

  1. 实现简单,直接CSS即可实现需求,且兼容IE低版本IE8~9

• 缺点:

  1. 不兼容IE10~11

• 如何解决不兼容的问题?

  1. 使用grayscale.js
  2. 了解grayscale.js(这个库很老了,暂时未找到更好的方案)
  3. 将两者结合起来使用就可以,达到最多的兼容性效果

  <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