Set the filter attribute through css to make the entire page grayscale and make the entire webpage gray

Set the filter attribute through css to set the overall gray of the page

Renderings:

By setting the filter property to grayscale(100%), all elements in the page will be applied with a gray filter effect, making the entire page appear grayscale.

<style type="text/css">
html {
    
    
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

</style>

The filter attribute is used to add different filters to the element; the grayscale() function will change the grayscale of the input image, and this function has a parameter that represents the scale of conversion to grayscale. When the value is 100%, the image is fully converted to grayscale; when the value is 0%, the image is unchanged. A value between 0% and 100% is a linear multiplier for the effect. If no value is set, the default is 0.

Note: If you only want to gray out specific areas, you can optionally use other CSS selectors to select the specific elements or containers you want the filter effect applied to.

Compatible with different browser codes:

html{
    
    
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
-webkit-filter：带有 webkit 前缀可以在 webkit 内核的浏览器中生效；
-moz-filter：带有 moz  前缀可以在 Firefox 浏览器中生效；
-ms-filter：带有 ms 前缀可以在 IE 浏览器生效；
-o-filter：带有 o 前缀可以在 Opera 浏览器生效；
最后三行都是为了兼容 IE 内核的浏览器。