Css+js Whole station Gray (compatible with ie7+)

After the large-scale earthquake and other natural disasters, the major sites have become gray to mourn the loss of life, then the whole station of the effect of the ash is how to do?

Rewrite a set of CSS? NO, even if you have this time to rewrite, what about the pictures in the site? Do you redo it again? It is obvious that the workload is not realistic.

Firefox and Chrome are easier to use with CSS3:

<style type= "Text/css" >.demo {color: red;}  {    filter: grayscale (100%);  /* firefox */    -webkit-filter:grayscale (100%);  /*Chrome*/}</style>

For the Ie7-ie9 browser, you can add a style to the head of the page by using the filter that comes with IE:

Body { filter:Gray;} /* IE7-IE9 must be added to the BODY element. */

Before and after effect comparison:

Effect of the leverage, but switch to IE10 or IE11 silly, IE10/11 need to use Grayscale.js to solve:

<script type= "Text/javascript" src= "grayscale.js" ></script><script type= "Text/javascript" >  Grayscale (document.body); </script>

Refresh the page, the effect and IE7-IE9 under the same, but now switch back to IE7, IE8, IE9, and dumbfounded, CSS does not work, the page is still color under the ie7-9! So, we need to judge the version of IE browser with CSS, JS processing, ie7-9 under the CSS with the filter, ie10-11 with grayscale.js processing, then the full compatibility of the wording is:

<style type= "Text/css" >.demo{Color:Red;}Body{Filter:grayscale (100%);/*Firefox*/-webkit-filter:grayscale (100%);/*Chrome*/Filter:Gray;/*ie7-9*/}</style>
{//judgment is IE10 or IE11 grayscale (document.body);}</script>

For the cross-domain of the picture gray temporarily still no solution, have to know the classmate please not greasy enlighten!

This article address: http://www.cnblogs.com/wangmeijian/p/4324693.html reprint please keep the source!

Css+js Whole station Gray (compatible with ie7+)