Chrome浏览器下将彩色图片黑白化,彩色图片加滤镜

时间 2021-01-12

结果:

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .gray {
               -webkit-filter: grayscale(100%);
               -moz-filter: grayscale(100%);
               -ms-filter: grayscale(100%);
               -o-filter: grayscale(100%);
               filter: grayscale(100%);
               filter: gray;
           }

           .con {
               height: 200px;
               width: 200px;
               background-image: url('./img/Chrome.jpg');
           }
       </style>
   </head>

   <body>
       <img src="img/Chrome.jpg" />
       <img src="img/Chrome.jpg" class="gray" />
       <div class="con gray">555</div>
       <script>
           var obj = [{
                   name: '',
                   age: '18'
               },
               {
                   name: '',
                   age: '18'
               },
               {
                   name: '',
                   age: '18'
               }
           ]
           obj.map((item,index)=>{
               for(var i in item){
                   if(item[i] === null || item[i] === ''){
                       item[i] = '/'
                   }
               }
           })
           console.log(obj)
       </script>
   </body>

</html>