29

CSS フィルターを試していますが、Firefox (15.0) ブラウザーでは機能しません。

HTML:

<div class="google">
     <img src="https://www.google.com/images/srpr/logo3w.png">
</div>

CSS:

.google{   
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

デモ: http://jsfiddle.net/xDJzU/

4

4 に答える 4

50

-moz-filter を使用して、GrayScale を Firefox で動作させるには制限があります。

機能させるには、以下のスニペットを使用します。

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+ */

デモ

于 2012-08-29T07:59:40.857 に答える
13

グレースケール画像を実現しようとしていると仮定して、CSS コードを次のように書き直します。

.google{
    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+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
​

更新された jsfiddle: jsfiddle リンク

于 2012-08-29T07:52:48.117 に答える
3

また、Firefox 39.0 で使用すると画像が完全に消えてしまうという問題もありました。

    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+ */

私にとってそれを解決したのは、「フィルター：グレースケール（1）」を追加することでした-そのように：

filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 39 (and above? Don´t know) */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

これでうまくいきました。IE 10以降についてはわかりませんが、テストしていません

于 2015-09-04T07:00:31.347 に答える
0

このコードは 100% 機能します。

.google{
    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"); 
    filter: gray;
    -webkit-filter: grayscale(100%)
}
于 2012-08-29T08:26:15.937 に答える