将css3筛选器应用于整个页面（可能有边距）

Body元素有边距，我想在整个页面上应用css3过滤器。 当我将filter设置为html元素时，它的行为就像只在body上一样

这说明了问题所在

html { background-color: red; filter: grayscale(100%); }
body { background-color: green; margin: 50px; }

问题是-如何在不添加额外覆盖的情况下，将灰度css3过滤器应用于正文中有边距的整个页面

更新：

我正在寻找通用的解决方案，在任何页面与任何结构的工作。像

html { filter:grayscale(100%) }

这在带有正文页边距的页面上失败。我不知道页面是否有正文边距或填充，或者什么是框大小等

---

也许这个问题应该被重新表述为：我应该注入什么样的css来使任何页面灰度化？

-也许最好使用填充而不是边距？

css过滤器似乎不适用于

元素，所以您必须按照说明添加额外的覆盖，或者如果您真的想避免覆盖，给你的

元素一个

填充

而不是

边距

---

有人能澄清一下过滤器是否以及为什么不适用于

的CSS属性吗？快速的谷歌搜索什么也没给我。

我确实把它包装在div上了，不是

html

和

body

，而是

。夜间模式

和

。包装器

，它正在工作

---

示例

这是否特定于浏览器？在Chrome（v38，旧但仍然）中，所有人都会看到灰度，包括

html

@Harry我有Chrome 45和firefox 41。在这两种灰度中，仅在身体上显示。有趣。也许在较新的版本中有些东西被修复了（或）倒退了。我考虑了相同的解决方案，但这样，他就不能为正文指定一个特定的填充物，除了边距，anche内容附加到边界-没有包装，但整个页面都有填充物和拉伸。谢谢你的精彩技巧。请参阅更新我的问题。这正是我的问题-为什么过滤器不应用于html元素以及可能的解决方法是什么！你能注入CSS和JavaScript吗？在这种情况下，您可以动态添加覆盖。我可以，但覆盖将不会有帮助。我不想封面，但将其更改为灰度。它必须保持以前的功能。只是灰度的。谢谢，但我不能改变页面结构，所以这对我不起作用。