logo标签列表

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

htmlcssblurdocument-bodycss-filters
3
当同时使用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过滤器来获得最大的浏览器支持。这个回答应该会有帮助 ---> https://dev59.com/7V4c5IYBdhLWcg3wvsbB#27584323 - Weafs.py
我将使用“invert”过滤器编写答案。 - Weafs.py
谢谢ChipChocolate！ - Gabriel Meono
1
-webkit-filter: blur(5px) invert(100%); 的翻译是：把它们放在一起。 - jaakkoj
2个回答
3
您可以使用svg的foreignObject元素将整个body的内容导入到一个svg元素中，然后在foreignObject上应用filter，这将在整个body上应用filter。 SVG滤镜与CSS滤镜的浏览器支持情况。

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

如果您想在事件上应用过滤器，可以首先从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>

3
有一个简单的方法可以做到这一点，特别是如果只是一个hack。在这种情况下，我将展示如何反转颜色，但我相信模糊效果也可以起作用。
基本上，创建一个Div并将其放置在代码中的任何位置。绝对定位它，并确保它是您浏览器的全宽度和高度。将z-index设置为1000（使其成为顶层），然后应用反转透明模式，背景颜色为白色。
// place this anywhere in your HTML
<div class="invert"></div>

//add this css
.invert {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  z-index: 1000;
  background: #fff;
  left: 0;
  mix-blend-mode: difference;
  pointer-events:none; //disable interactivity
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接