How to Apply Grayscale Filters in Internet Explorer 10?

Applying Grayscale Filters in Internet Explorer 10

Internet Explorer 10 presents a challenge for applying grayscale filters using traditional CSS methods. Unlike previous versions of IE, DX filters and prefixed grayscale filters are no longer supported.

Solution: SVG Overlay

To grayscale images in IE10, you can employ an SVG overlay. This involves using an SVG filter with a matrix that converts the image to grayscale.

CSS Code:

<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>

Additional Considerations:

• The SVG overlay technique works best when the image has a solid background.
• For more information on SVG filter effects in IE10, refer to: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Example:

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

The above is the detailed content of How to Apply Grayscale Filters in Internet Explorer 10?. For more information, please follow other related articles on the PHP Chinese website!