Chrome瀏覽器和Firefox中的CSS過濾器無法正常工作

我想創建一個Chrome擴展程序，它爲色盲測試執行一些過濾，並且想要使用css/svg過濾程序，但是過濾程序不會影響正文背景。Chrome瀏覽器和Firefox中的CSS過濾器無法正常工作

有什麼建議嗎？

鏈接到codepen（在鉻試驗）或參見下文截圖： http://codepen.io/larsenwork/pen/oZvdzX/?editors=1100

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

鉻+火狐：

Safari中：

來源

2017-02-22 Andreas Larsen

已確認錯誤，尚未修復：[過濾器不會改變主體背景顏色，除非'html'中指定'背景]]（https://crbug.com/591015） – wOxxOm

@wOxxOm啊，歡呼聲 - 謝謝 –

於是我找到了解決方案（不滿意的話），但設置背景屬性一樣的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; 
}

來源

2017-02-22 20:07:03

Chrome瀏覽器和Firefox中的CSS過濾器無法正常工作

回答

相關問題