Question

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

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

问题是 - 如何将灰度css3滤镜应用于整体页面，而不会添加额外的叠加效果，而不会增加额外的叠加效果？

更新

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

html { filter:grayscale(100%) }

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

也许问题应该改为：我应该注入什么样的css来制作任何页面灰度？

Answer 1

jsfiddle - 也许最好使用填充而不是保证金？

Answer 2

CSS过滤器似乎不适用于<html>元素，因此您必须按照here说明添加额外的叠加层，或者如果您确实想避免叠加层，请提供{{ 1}}元素a <body>而不是padding。

有人可以澄清过滤器是否以及为何不适用于margin的CSS属性？快速谷歌搜索没有给我什么。

Answer 3

我确实将它包装在div上，而不是html和body，而是.night-mode和.wrapper并且它正在工作示例JSFIDDLE