我想创建一个 chrome 扩展,为色盲测试做一些过滤,并想使用 css/svg 过滤器,但过滤器不影响 body 背景有问题。
有什么建议吗?
链接到 codepen(在 Chrome 中测试)或查看下面的屏幕截图: http://codepen.io/larsenwork/pen/oZvdzX/?editors=1100
html {
filter: grayscale(100%);
}
body, div {
background-color: cyan;
}
/* Codepen style (ignore) */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
padding: calc(3vh + 3vw);
display: flex;
flex-direction: column;
align-items: flex-start;
font-family: sans-serif;
font-weight: 700;
font-size: calc(3vh + 3vw);
line-height: 1.3;
}
div {
margin: 0 calc(-.5vh - .5vw);
padding: 0 calc(.5vh + .5vw);
}
small {
font-size: .6em;
margin-top: 2em;
}
pre {
font-weight: normal;
}
In Chrome: Why is the body bg not gray
<div>When this is?</div>
<small>Same result (i.e. not applied to body) with e.g. <pre>filter: hue-rotate(90deg);</pre>or<pre>filter: url("#grayscale");</pre></small>
<!-- Used for alt filter test -->
<svg version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>
最佳答案
所以我找到了一个解决方案(对此并不满意)但是设置了一个背景属性,例如 background-color: magenta;
或 background-image: url("");
在 html 上修复了 chrome 和 Firefox 中的问题
链接到工作版本: http://codepen.io/larsenwork/pen/mWbjJY?editors=1100
html {
filter: grayscale(100%);
background-color: magenta;
}
body, div {
background-color: cyan;
}
关于CSS 过滤器不适用于 Chrome 和 Firefox 中的正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42400970/