web-dev-qa-db-ja.com

Internet Explorer 10-グレースケールフィルターを適用する方法

このCSSコードは、Internet Explorerで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 10では何をする必要がありますか？

internet-explorercss3internet-explorer-10
36
jellobird

IE10はDXフィルターをサポートしていません 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);
}

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

簡略化されたJSFiddle： http://jsfiddle.net/KatieK/qhU7d/2/

IE10 SVGフィルター効果の詳細： http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

34
KatieK

インラインSVGは、IE 10および11およびEdge 12で使用できます。

これらのブラウザーのポリフィルを含む、grayというプロジェクトを作成しました。ポリフィルは<img>インラインSVGのタグ： https://github.com/karlhorky/gray

実装するための短いバージョンは、上記のGitHubリンクでjQueryプラグインをダウンロードし、jQueryの後に体の最後に追加することです。

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

クラスgrayscaleを持つすべての画像は灰色で表示されます。

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

必要に応じて デモを参照 もできます。

22
Karl Horky

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

それが唯一のクロスブラウザソリューションのようです。さらに、それは素晴らしいフェードインとフェードアウト効果を持っています。

$('.bwWrapper').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // to invert the hover effect
    invertHoverEffect: false,
    // this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
    intensity:1,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img) {
        // this callback gets executed anytime an image is converted
    }
});
5
Corni