CSS：模糊和反转整个页面的颜色 [英] CSS: Blur and invert colors for entire page
问题描述
当使用两个webkit过滤器blur和invert时，只有模糊效果。
如果blur被删除，invert将起作用。
只有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 的 foreignObject 元素将整个 body 的内容导入到一个 svg 元素，然后在 foreignObject 过滤器 >它将在整个 body 上应用过滤器 s。
CodePen上的演示
html，body {width：100％;身高：100％;背景：＃222222; margin：0;}
< body> < svg width =100％height =100％style =position：absolute; left：0; top：0;> < DEFS> < filter id =blur-and-invert> < feGaussianBlur in =SourceGraphicstdDeviation =3/> < feColorMatrix type =saturatevalues =1result =fbSourceGraphic/> < feColorMatrix in =fbSourceGraphicvalues = - 1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0/> < /滤光器> < / DEFS> < foreignObject width =100％height =100％filter =url（＃blur-and-invert）> <！ - 这里是内容 - > < img src =http://lorempixel.com/450/300/sportswidth =100％height =100％/> < / foreignObject> < / svg>< / body>
$ b
如果您想在事件上应用过滤器，您可以移除过滤器属性最初来自 foreignObject 元素，并以这种方式应用过滤器。
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％;身高：100％;背景：＃222222; margin：0;}
< body> < svg width =100％height =100％style =position：absolute; left：0; top：0;> < DEFS> < filter id =blur-and-invert> < feGaussianBlur in =SourceGraphicstdDeviation =3/> < feColorMatrix type =saturatevalues =1result =fbSourceGraphic/> < feColorMatrix in =fbSourceGraphicvalues = - 1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0/> < /滤光器> < / DEFS> < foreignObject width =100％height =100％> < img src =http://lorempixel.com/450/300/sportswidth =100％height =100％/> < / foreignObject> < / svg>< / body>
When using both webkit filters "blur" and "invert", only blur works. And if "blur" is removed "invert" works.
Also only Chrome and Opera are responding to the code.
Is there a way to make this work for recent IE and Firefox versions?
body {
-webkit-filter: invert(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
You could use svg's foreignObject element to import the entire body's content into an svg element and then apply the filters on the foreignObject which will apply the filters on the entire body.
Browser support for svg filters vs CSS filters.
Demo on CodePen
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>
If you want to apply the filter on an event, you could remove the filter attribute from the foreignObject element initially and apply the filter using JavaScript this way.
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>
这篇关于CSS：模糊和反转整个页面的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
