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

Question

यह सीएसएस कोड इंटरनेट एक्सप्लोरर के लिए बहुत अच्छा काम करता है 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); 
} 

जब तक लेकिन मैं इंटरनेट एक्सप्लोरर 10 के लिए क्या करना है क्या ज़रूरत है?

Answer 1

IE10 does not support DX filters आईई 9 और पहले के रूप में किया गया है, और न ही यह ग्रेस्केल फ़िल्टर के प्रीफिक्स्ड संस्करण का समर्थन करता है।

हालांकि, आप ग्रेस्केलिंग को पूरा करने के लिए आईई 10 में एक एसवीजी ओवरले का उपयोग कर सकते हैं। उदाहरण:

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: http://jsfiddle.net/KatieK/qhU7d/2/

अधिक IE10 एसवीजी फिल्टर प्रभाव के बारे में: इस jQuery प्लगइन https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

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

Answer 2

का उपयोग करने वाले ऐसा लगता है कि एकमात्र क्रॉस-ब्राउज़र समाधान है। इसके अलावा इसमें एक अच्छा फीका है और प्रभाव खराब हो गया है।

Answer 3

इनलाइन एसवीजी आईई 10 और 11 और एज 12.

मैं जो इन ब्राउज़रों के लिए एक polyfill शामिल एक परियोजना ग्रे नामक बना लिया है में इस्तेमाल किया जा सकता है। polyfill बाहर स्विच इनलाइन एसवीजी साथ <img> टैग:

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

: https://github.com/karlhorky/gray

को लागू करने के लिए, लघु संस्करण के लिए अपने शरीर के अंत में jQuery के बाद ऊपर GitHub लिंक पर jQuery प्लगइन डाउनलोड करने और जोड़ने के लिए है फिर कक्षा grayscale कक्षा के साथ हर छवि ग्रे के रूप में दिखाई देगी।

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

यदि आप चाहें तो see a demo भी कर सकते हैं।