Internet explorer 10 - howtoはグレースケールフィルタを適用しますか？

Question

このCSSコードは9

img.gray { 
    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(1); 
} 

まで、Internet Explorer用のかなりいい作品しかし、私は、Internet Explorer 10のために行うには何が必要ですか？

Answer 1

IE10 does not support DX filters IE9以前では、グレースケールフィルタのプレフィックス付きバージョンもサポートしていません。

ただし、IE10でSVGオーバーレイを使用してグレースケールを達成できます。例：

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

svg { 
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); 
} 

（から：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）

簡体JSFiddle：IE10のSVGフィルタ効果についてhttp://jsfiddle.net/KatieK/qhU7d/2/

より：http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Answer 2

使用このjQueryプラグイン https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

ことクロスブラウザの唯一のソリューションと思われます。それは素晴らしいフェードインとフェードアウト効果をプラスしています。

Answer 3

インラインSVGは、IE 10と11とエッジ私はこれらのブラウザのためのポリフィルを含んでいるグレーと呼ばれるプロジェクトを作成しました12

で使用することができます。上記のGitHubのリンクでjQueryのプラグインをダウンロードして、あなたの体の末尾にjQueryの後に追加することで、短いバージョンを実装するにはhttps://github.com/karlhorky/gray

：

<script src="/js/jquery.gray.min.js"></script> 

ポリフィルはインラインSVGで<img>タグを切り替えクラスgrayscaleの画像はすべて灰色で表示されます。

<img src="/img/color.jpg" class="grayscale"> 

ご希望の場合は、see a demoでも可能です。