CSS过滤器无法在Chrome和&火狐

时间:2017-02-22 19:52:05

标签: css google-chrome google-chrome-extension

我想创建一个chrome扩展,为色盲测试做一些过滤,并希望使用css / svg过滤器,但是过滤器的问题不会影响身体背景。

有什么建议吗?

链接到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>

Chrome + Firefox: Chrome Screenshot

Safari中: Safari Screenshot

1 个答案:

答案 0 :(得分:1)

所以我找到了一个解决方案(不满意),但在html上设置background-color: magenta;background-image: url("");等背景属性修复了chrome和Firefox中的问题

链接到工作版本: http://codepen.io/larsenwork/pen/mWbjJY?editors=1100

html {
    filter: grayscale(100%);
    background-color: magenta;
}

body, div {
    background-color: cyan;
}