Code for the website to become gray

Filters are used in IE browser to solve the problem.

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

 

Under chrome

-webkit-filter: grayscale(100%);

 

 

IE + Firefox + chrome

html {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url(desaturate.svg#grayscale);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);}

A large area of operations to reduce the page performance is certain. Here, I just want to share this article with you. Recently, I have seen this style, and it feels so amazing. In this style code, a file is involved, that isDesaturate. SVGFrom the file extension, we can see that the SVG technology is used. The Code is as follows:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/> </filter> </svg>

You only need to save the codeDesaturate. SVGAnd then through the URL link, it is very simple. On the demo page we saw earlier, a style is added to the body, which affects all elements on the page. If necessary, you can set a class name in the public library to call the style. For example:

.pic_gray {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url(desaturate.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}

　　

　

　　

 

 

Perfect compatibility, or simply add the following in CSS:

<style type="text/css">html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);}</style>