css - 将 css3 过滤器应用于整个页面(可能有边距)

Question

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

This jsfiddle显示问题。

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

问题是 - 如何将灰度 css3 滤镜应用于主体中有边距的整个页面而不添加额外的叠加层？

更新:

我正在寻找适用于具有任何结构的任何页面的通用解决方案。喜欢

html { filter:grayscale(100%) }

这在有正文边距的页面上失败。我不知道页面是否有 body margin 或 padding 或什么是 box-sizing 等。

也许问题应该改写为:我应该注入(inject)什么 css 来使任何页面灰度化？

Answer 1

jsfiddle - 使用填充而不是边距可能更好？