CSS过滤器无法生效,Chrome浏览器和Firefox中的CSS过滤器无法正常工作

我想创建一个Chrome扩展程序，它为色盲测试执行一些过滤，并且想要使用css/svg过滤程序，但是过滤程序不会影响正文背景。Chrome浏览器和Firefox中的CSS过滤器无法正常工作

有什么建议吗？

html {

\t filter: grayscale(100%);

}

body, div {

\t background-color: cyan;

}

/* Codepen style (ignore) */

* {

\t margin: 0;

\t padding: 0;

\t box-sizing: border-box;

}

body {

\t min-height: 100vh;

\t padding: calc(3vh + 3vw);

\t display: flex;

\t flex-direction: column;

\t align-items: flex-start;

\t font-family: sans-serif;

\t font-weight: 700;

\t font-size: calc(3vh + 3vw);

\t line-height: 1.3;

}

div {

\t margin: 0 calc(-.5vh - .5vw);

\t padding: 0 calc(.5vh + .5vw);

}

small {

\t font-size: .6em;

\t margin-top: 2em;

}

pre {

\t font-weight: normal;

}

In Chrome: Why is the body bg not gray

When this is?

Same result (i.e. not applied to body) with e.g.

or

铬+火狐：

Safari中：

+3

已确认错误，尚未修复：[过滤器不会改变主体背景颜色，除非'html'中指定'背景]](https://crbug.com/591015) –

+0

@wOxxOm啊，欢呼声 - 谢谢 –