Question

当使用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);
}

Answer 1

您可以使用svg的{{1}}元素将整个foreignObject内容导入body元素，然后应用{ {1}} svg上的filter foreignObject将filter用于整个body。

浏览器支持svg filters与CSS filters。

`Demo on CodePen`

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}

＆＃13;

<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>

＆＃13;

如果您想对活动应用filter，可以先从filter元素中移除foreignObject属性，然后以这种方式使用JavaScript应用filter。

var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')

＆＃13;

var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}

＆＃13;

<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>

＆＃13;

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

1 个答案:

`Demo on CodePen`