CSS：整个页面的模糊和反转颜色答案

【问题标题】：CSS: Blur and invert colors for entire pageCSS：整个页面的模糊和反转颜色
【发布时间】：2014-12-23 03:35:55
【问题描述】：

同时使用 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 过滤器来过滤maximum browser support。这个答案应该会有所帮助---> stackoverflow.com/questions/27583937/…
我会用invert过滤器写一个答案。
谢谢ChipChocolate！
把它们放在一起 -webkit-filter: blur(5px) invert(100%);

标签： html css blur document-body css-filters

【解决方案1】：

您可以使用svg 的foreignObject 元素将整个body 的内容导入svg 元素，然后将filters 应用于foreignObject，这将应用@987654330 @s 在整个 body 上。

浏览器支持svg filters 与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>

如果您想在事件上应用filter，您可以先从foreignObject 元素中删除filter 属性，然后通过这种方式使用JavaScript 应用filter。

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>

【讨论】：