彩色圖像灰度圖像在Firefox

未正常工作this我使用這個彩色圖像灰度圖像在Firefox

img{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    filter: gray;/*ie fallback*/ 
    filter: grayscale(100%); 
}

它工作在鉻。但不能在Firefox中工作。我使用的是Firefox 27.1。

demo

來源

2014-02-28 Bhojendra Nepal

'爲了獲得在Firefox 4+相同的效果，我們需要使用SVG過濾器 - 您需要添加SVG過濾器 - filter：url（filter.svg＃greyscale）; - 然後創建'filter.svg' –

首先，我要指出，CSS filter是一種實驗技術，這是隻有在Webkit的實現，它不具備瀏覽器的兼容性。

但是，對於Firefox 3.5及更高版本，您可以使用SVG filter和Data URI作爲SVG。

由於我們必須定位filter元素（在本例中爲#grayscale），因此我們不應該使用encode the SVG as base64。

因此，我們可以編碼空格字符作爲%20來獲取數據的URI的工作：

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");

在這裏你去：

img { 
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
} 

img:hover { /* Remove the filter on hover. remove this if it is not needed */ 
    filter: none; 
    -webkit-filter: grayscale(0); 
}

來源

2014-02-28 10:33:51

彩色圖像灰度圖像在Firefox

回答

相關問題