Method 1: Support IE
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<style>
Html{filter:progid:d XImageTransform.Microsoft.BasicImage (grayscale=1);}
</style>
Description: This method supports IE and does not support non IE kernel browsers such as Firefox and Chrome.
Method 2: Support IE
Body {Filter:gray}
Description: This method supports IE and does not support non IE kernel browsers such as Firefox and Chrome.
Tip: Although this method has the smallest amount of code, the effect is not good, and the Web page also compares cards.
Method 3: Also supports IE and chrome
<style>
HTML {overflow-y:scroll;filter:progid:d XImageTransform.Microsoft.BasicImage (grayscale=1);-webkit-filter:grayscale (100%);}
</style>
Description: This method supports browsers such as IE, Safari, and Chrome, but does not support Firefox browsers.
Method 4: Use the Grayscale.js plug-in using the Grayscale.js plug-in
. This plug-in is analog IE's filter:progid side, the official website address in:
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
Using the method:
<script src= "Http://james.padolsey.com/demos/grayscale/grayscale.js" type = "Text/javascript" ></script>
<script type= "Text/javascript"
Window.onload=function () { &NBSP
Grayscale (document.body);
}
</script>
Description: Support IE, Safari, Chrome, Browsers such as Opera and Firefox.
Problem: This also accounts for resources under IE.
Recommendation: Use Method 3 , although more browsers are not supported, they are stable, fast, and have a small resource footprint.