CSS3 Firefox濾鏡灰度沒有模糊效果矩陣

Question

我現在有下面的代碼來灰度化我的圖像（在這裏找到的stackoverflow）。問題是這也影響了圖像。我想要一個矩陣，只將顏色調整爲灰度，而不改變圖片的模糊程度。

CSS代碼：

filter: url(svg/filters.svg#grayscale); 
filter: gray; /* IE6-9 */ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */ 

Answer 1

嘗試使用filterRes屬性播放時，它定義了中間圖像的

寬度和高度，以像素

並且可以具有急劇影響圖像質量。看到這個例子：

http://jsfiddle.net/Jxtjt/

<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png'> 

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' filterRes='600'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
} 
img:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' ><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
} 

原來的過濾器上的HI採用了filterRes設置600像素，這看起來不錯，至少在我顯示，它可能看起來在其他顯示器不同，也許特別是-DPI。將鼠標懸停在圖像上以查看正在應用的過濾器，但未設置filterRes屬性。

根據您的使用情況，這可能是您的一種解決方法。

對我來說，這看起來像一個Firefox中的錯誤（你可能想要提交一個bug report）。根據規格，用戶代理負責計算輸出設備上看起來不錯的值，以防未設置，所以也許這就是Firefox出錯的地方，不確定。