html{
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 ….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);
filter: gray;
-webkit-filter: grayscale(1); 
}

效果图如下
WX20220331-140746@2x.png
WX20220331-140802@2x.png