css filter属性不生效问题处理

明天是清明节假期，感谢疫情以来第一个假期就让我学到了一个棘手问题解决方案

由于清明节公祭日，公司的网站都要改为灰度样式，明明就是一个很简单的问题，再是在样式表里增加这个一个样式即可，答案很简单

html{
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter:grayscale(1)
}

改好之后同事告诉我，你告诉我的方案不管用，我一看果然是有个图片没有生效，赶紧找资料，google半天也找不到处理方案。
打开控制看查看元素发现，这个图片是body的背景图片。
本想就这样让他用ps修改图片得了。

我自己在想，如果html上增加上background会是什么效果呢

见证奇迹的时刻。。。

body上的背景图片竟然收到filter影响变成灰度的了。

实现方案也就有了，那就在html上增加个background:#ffffff;样式

如果谁要是在html上增加背景图片那我可真没有办法了。

总结：

如果body上有背景图片或者背景颜色无法使filter生效的话，建议在html标签增加background属性