When a major mourning event occurs, many websites will gray out the website to express condolences. Here I have summed up two methods of graying out CSS web pages and sharing them with you.
CSS filter method
Write it directly in the BODY, just put the CSS code: filter: grayscale(100%); into the body element. As shown below:
| 1 |
<body style="filter: grayscale(100%);">
|
Or write it in the CSS file, which is compatible with the writing method
| 1 2 3 4 5 6 7 8 |
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;
}
|
concise writing
| 1 2 3 4 |
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
|
CSS grayscale method
Add the following code directly to the CSS style file of the website, so that there is no need to change the html code.
| 1 |
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;}
|
Or use the following code, the above code is recommended for compatibility
| 1 2 3 4 5 6 7 8 9 |
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\'></fecolormatrix></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
|
Concise writing
| 1 |
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
|