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%);" > |