当同时使用 webkit 过滤器“模糊”和“反转”时，只有模糊有效。
如果“模糊”被删除，“反转”就可以了。
此外，只有 Chrome 和 Opera 响应该代码。
有没有办法让它适用于最新的 IE 和 Firefox 版本？
body {
-webkit-filter: invert(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
你可以使用svg's foreignObject导入整个元素body的内容变成svg元素，然后应用filter是在foreignObject这将应用filter整个body.
浏览器支持svg filters http://caniuse.com/#search=svg%20filter vs CSS 过滤器 http://caniuse.com/#search=css%20filter.
Demo on CodePen http://codepen.io/chipChocolate/pen/dPpoPp
html, body {
width: 100%;
height: 100%;
background: #222222;
margin: 0;
}
<body>
<svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
<defs>
<filter id="blur-and-invert">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
<feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
</filter>
</defs>
<foreignObject width="100%" height="100%" filter="url(#blur-and-invert)">
<!-- Here goes the content -->
<img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
</foreignObject>
</svg>
</body>
如果您想应用filter在某个事件中，您可以删除filter属性来自foreignObject元素最初并应用filter以这种方式使用 JavaScript。
var body = document.getElementsByTagName('foreignObject')[0];
body.setAttribute('filter', 'url(#blur-and-invert)')
var body = document.getElementsByTagName('foreignObject')[0];
body.setAttribute('filter', 'url(#blur-and-invert)')
html, body {
width: 100%;
height: 100%;
background: #222222;
margin: 0;
}
<body>
<svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
<defs>
<filter id="blur-and-invert">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
<feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
</filter>
</defs>
<foreignObject width="100%" height="100%">
<img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
</foreignObject>
</svg>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
