Modify the CSS style to achieve the gray page (no color, only light black and white) several methods of finishing

Time:2021-6-15

Generally, on the Tomb Sweeping Day, the national day of mourning, the day of the great earthquake, and the day of the death or commemoration of some influential great people, as webmasters, we will turn all the pages of our website into gray (black and white) to express our mourning for the dead. So let’s talk about it today, through a few lines of simple code, to achieve this function.

This morning, some netizens mentioned that they would like to change the overall tone of the website into gray and black. This will be useful when commemorating some days in the past, and it was also used in the previous developer website. I remember that at that time, it could be realized by modifying CSS directly. Since there is a user’s need, I’ll take some time to sort it out again to see if there are other better methods.

We can choose the appropriate CSS code style according to the actual needs and add it to the code of our own web page template to realize the gray and black-and-white style of the web page.

First, page black and white code style a first: modify CSS file

We can add the following CSS code to the CSS file of the webpage to realize the black and white color of the webpage, that is, the website becomes gray

CSS code
 

Web page black and white code style a


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

Also recommend this kind of code webpage black and white code style B


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

Here we can add the code to the head template, to achieve the whole station can.

Second: add the following code into the < head > tag of the web page

If you don’t want to change the CSS file, you can add inline CSS code inside the < head > tag in the head of the web page to make the web page gray

code
 


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

Third: modify < HTML > tags to add inline styles

If you don’t like the above two methods, you can modify the < HTML > tag to add inline style to achieve the effect of graying out the web page

code

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

Fourth: CSS code used by the author himself

code:


body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}

Here, we choose to add to the code according to the actual needs.

PS: the above methods, are through the CSS filter to control the display of the page, the only different way to call the CSS code. Ladies and gentlemen, dig out what you like!