When you see that the content of the entire site has turned gray, including buttons, pictures, and so on. At this time, we may wonder how this is done?
Some people think that all content has been uniformly changed to a CSS style, all pictures have been changed to gray, and styles such as buttons have also been uniformly changed to gray style. But if you think about it, the cost is too high, and wouldn't it be too abrupt if a certain control forgot to add a gray style.
In fact, the solution is very simple, it only takes a few lines of code to get it done. Through the reference materials, I have summarized the following methods that can help us achieve our goals:
The easiest way to make the color of this web page gray is in the css of the current page. Add the following code and have it run correctly in any browser:

method one:

<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:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>

filter means filter, filter:graywhich means to add a grayscale filter to the page, so all the content in html will become black and white. However, this filter is invalid for chrome and safari browsers, so there will be a line below -webkit-filter: grayscale(100%);that is exclusive to browsers that use the webkit kernel. The meaning is FILTER: gray;similar, but the way of writing is different.

Method Two:

The following piece of code can turn the webpage into black and white. Add the code to the top of the CSS to achieve plain loading. If the website does not use CSS, you can insert it between the HTML code style of the webpage template

<style>
html {
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 -webkit-filter: grayscale(100%);
}
</style>

Some websites may not be able to use this css because the website does not use the latest webpage standard protocol. Please replace the top part of the webpage with the following code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

There are also some websites where the color of FLASH animation cannot be controlled by CSS filters, and can be inserted between the and of the FLASH code:

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

Given a standard code, add this code to the css of the website page to achieve the effect of turning the page into gray:

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    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)
}

Original link: https://blog.csdn.net/YOUYOU0710/article/details/105350655

How can a website go gray so quickly? , a few lines of code and you're done!

method one:

Method Two:

Guess you like