如何基于filter实现网站整体变灰功能

(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )

前言

政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用，笔者已在生产环境使用过。通过整体的html使用filter来进行过滤。如下，只要引入即可。

解决方案

html { 
  filter: url("data:image/svg+xml;utf8,#grayscale"); 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
  filter: gray; 
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

IE11 和 IE10的解决方案

经过测试发现，以上代码的方式对于谷歌，火狐，IE8，9都很好使。对于IE11和IE10效果不奏效。于是我们采取另一种方式，通过引用grayscale.js来使用。由于不能上传文件，在此将grayscale.js的代码写下来。

/*
 * -- grayscale.js --
 * Copyright (C) James Padolsey (http://james.padolsey.com)
 * Download by //www.jb51.net
 */

var grayscale = (function(){
  
  var config = {
      colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],
      externalImageHandler : {
        /* Grayscaling externally hosted images does not work
          - Use these functions to handle those images as you so desire */
        /* Out of convenience these functions are also used for browsers
          like Chrome that do not support CanvasContext.getImageData */
        init : function(el, src) {
          if (el.nodeName.toLowerCase() === 'img') {
            // Is IMG element...
          } else {
            // Is background-image element:
            // Default - remove background images
            data(el).backgroundImageSRC = src;
            el.style.backgroundImage = '';
          }
        },
        reset : function(el) {
          if (el.nodeName.toLowerCase() === 'img') {
            // Is IMG element...
          } else {
            // Is background-image element:
            el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
          }
        }
      }
    },
    log = function(){
      try { window.console.log.apply(console, arguments); }
      catch(e) {};
    },
    isExternal = function(url) {
      // Checks whether URL is external: 'CanvasContext.getImageData'
      // only works if the image is on the current domain.
      return (new RegExp('https"]"]"]"]"text/javascript">
 var navStr = navigator.userAgent.toLowerCase();
 if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
  $(function () {
    grayscale($('body'));
  })
 }
</script>

这里建议直接捕捉body，如果想针对某一个，换其中的捕捉元素就可以。

总结

至此，网站变灰的方案就完美了。完美兼容各种浏览器，笔者已经在生产环境使用过了，大家放心使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：vue fetch中的.then()的正确使用方法
下一篇：详解Nuxt内导航栏的两种实现方式