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

Internet Explorer 10 でのグレースケール フィルターの適用

Internet Explorer 10 では、従来の CSS メソッドを使用してグレースケール フィルターを適用するという課題があります。以前のバージョンの IE とは異なり、DX フィルターとプレフィックス付きグレースケール フィルターはサポートされなくなりました。

解決策: SVG オーバーレイ

IE10 で画像をグレースケールするには、SVG を使用できます。かぶせる。これには、画像をグレースケールに変換するマトリックスを備えた SVG フィルターの使用が含まれます。

CSS コード:

<code class="css">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");
}</code>

追加の考慮事項:

• SVG オーバーレイ技術は、画像に単色の背景がある場合に最も効果的に機能します。
• IE10 の SVG フィルター効果の詳細については、次を参照してください: http://blogs.msdn.com /b/ie/archive/2011/10/14/svg-filter-Effects-in-ie10.aspx

例:

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

以上がInternet Explorer 10 でグレースケール フィルターを適用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。