इंटरनेट एक्सप्लोरर 10 में ग्रेस्केल फ़िल्टर लागू करना

इंटरनेट एक्सप्लोरर 10 पारंपरिक सीएसएस विधियों का उपयोग करके ग्रेस्केल फ़िल्टर लागू करने के लिए एक चुनौती प्रस्तुत करता है। IE के पिछले संस्करणों के विपरीत, DX फ़िल्टर और प्रीफ़िक्स्ड ग्रेस्केल फ़िल्टर अब समर्थित नहीं हैं।

समाधान: SVG ओवरले

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");
}

अतिरिक्त विचार:

• एसवीजी ओवरले तकनीक तब सबसे अच्छा काम करती है जब छवि की पृष्ठभूमि ठोस हो।
• एसवीजी पर अधिक जानकारी के लिए IE10 में फ़िल्टर प्रभाव, देखें: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

उदाहरण:

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