CSS3 Grayscale filter Picture black and white

1. Make the entire page of the picture Gray, the code is as follows.

html{
font-size:100%;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
Filter:grayscale (100%);
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-ms-filter:grayscale (100%);
-o-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\ '/></filter></svg> #grayscale ");
Filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=1);-webkit-filter:grayscale (1);
}

2. If only some of the images are grayed out, refer to the class name. For example:

. gray{
font-size:100%;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
Filter:grayscale (100%);
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-ms-filter:grayscale (100%);
-o-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\ '/></filter></svg> #grayscale ");
Filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=1);-webkit-filter:grayscale (1);
}

CSS3 Grayscale filter Picture black and white