👏👏👏 page want to go black and white gray? How does IE do compatibility?

Business scenario: in some cases, the page is changed to black, white and gray color theme

Solution 1: CSS filter ✌️[do not need to be compatible with IE students can use ~]

html { filter: grayscale(100%); //IE browser -webkit-filter: grayscale(100%); // Google Browser-moz-filter: Grayscale (100%); // Fox-MS-filter: Grayscale (100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); // Google Chrome}Copy the code

Solution 2: Use grayscale.js plugin [perfect solution ✌️][Compatibility IE7 +]

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, > <title>Document</title> </head> <style type="text/ CSS ">. Demo {color: red; } body { filter: grayscale(100%); /* Webkit-filter: grayscale(100%); /*chrome*/ filter: gray; </style> <div style="background-color: red; height: 100px; width: 100px;" ></div> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.juzimi.com%2Fweibopic%2Fjxzpmo5.jpg&refer=http%3A%2F%2Ff Ile.juzimi.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1628663206 & t = f92345afac0852b96b603ff09f0f4003" alt=""> </body> </html> <script src="https://j11y.io/demos/grayscale/grayscale.js"></script> <script type="text/javascript"> grayscale(document.body); </script>Copy the code