将整个网站变为黑白色

目录

效果：

代码：

兼容性写法：

原理：

效果：

ps：实测淘宝也是用的这种方式，有兴趣可以去看看

代码：

使用方式就是找到根标签，将里面的两行代码放进去即可

  

   

    

     

    
    

     

      html {
     
    
   

    

     

    
    

     

        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
     
    
   

    

     

    
    

     

        -webkit-filter: grayscale(100%);
     
    
   

    

     

    
    

     

        }
     
    
  

兼容性写法：

上面的方式基本够用，常见的浏览器经测试没问题，实际上这个方法已经实际使用很多年了。

  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      html {
     
    
   

    

     

    
    

     

          -webkit-filter: grayscale(100%); //chrome、safari浏览器
     
    
   

    

     

    
    

     

          -moz-filter: grayscale(100%);//firefox浏览器
     
    
   

    

     

    
    

     

          -ms-filter: grayscale(100%);  //IE浏览器
     
    
   

    

     

    
    

     

          -o-filter: grayscale(100%); //Opera浏览器
     
    
   

    

     

    
    

     

          filter: grayscale(100%); 
     
    
   

    

     

    
    

     

          filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
     
    
   

    

     

    
    

     

         }
     
    
  

原理：

grayscale() - CSS（层叠样式表） | MDN

可以点击上面的链接去详细了解。大体意思是，这个方法是对图片进行灰度转换，使用方式：

   

    

     

      

     
     

      

       grayscale(0)     /* 无效果 */
      
     
    

     

      

     
     

      

       grayscale(.7)    /* 70% 灰度 */
      
     
    

     

      

     
     

      

       grayscale(100%)  /* 灰度最大 */
      
     
    

     

      

     
     

      

       完整写法：filter: grayscale(0.20);//20%灰度