Four coding solutions to achieve the overall black-and-white/gray-white effect of a WordPress website

Generally speaking, when the overall effect of a website appears in black and white or gray, it is mostly because of posting something important or commemorating some people or things. This year, due to special reasons,  the WordPress  website also turned the entire website gray in order to deeply mourn those who sacrificed their lives in the fight against the epidemic. The following is a collection of codes that can be used for testing and testing. Now I will share them with you and learn  how to use CSS styles .

The first method of website black and white:

Just add the following code at the top of  the style.css  file . Some WordPress  website themes have custom CSS style functions . You can directly paste the code and save it.

 
 

1

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

The second method of website grayscale:

Put the following code before </head> to make the corresponding web page black and gray!

 
 

1
2
3
4
5

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

The third method of graying out the website:

If you don't like the above two methods, you can modify  the <html> tag to add inline styles to achieve the effect of graying out the web page .

 
 

1

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

The fourth method of graying out the website as a whole:

 
 

1
2
3
4
5
6
7
8
9

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- */
}

The above are four ways to make the entire website gray through CSS filters. The only difference is that the writing and implementation methods are different. This is the so-called "draw inferences from one example" effect.

Guess you like

Origin blog.csdn.net/winkexin/article/details/131761277