कैसे पीएनजी अल्फा पारदर्शिता बनाए रखने के लिए उपयोग करते समय "एमएस फिल्टर" संपत्ति

Question

मैं निम्न HTML है:

<a><img src="myfile.png" /> Some text</a> 

और यह सीएसएस:

a:hover 
{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
    opacity: .75; 
} 

इस के साथ समस्या यह दोनों IE में होता है 8 और IE 7.

जब PNG छवि एमएस फिल्टर या फिल्टर के अधीन है, अपने अल्फा transpa रेंसी बर्बाद हो गई है। इसे आज़माएं और आप देखेंगे। यह आईई 8 और आईई 7 में एक बग है।

क्या मैं सीएसएस में "-ms-opacity" और "फ़िल्टर" गुणों को हटा सकता हूं? इसके लिए वाक्यविन्यास क्या है? (उदाहरण के लिए -ms-filter: "";)

क्या कोई इस मुद्दे पर एक काम जानता है?

Answer 1

अद्यतन: AlphaImageLoader सीधे आईएमजी पर लागू फ़िल्टर अल्फा फ़िल्टर को ओवरराइड कर सकता है। फ़िल्टर को हटाने के लिए आपने filter:none; को आजमाया है?

हां, प्रोग्रामिक रूप से आईसी 6 और सशर्त टिप्पणियों के साथ नीचे लक्षित करें।

<!--[if lt IE 7]> 
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style> 
<![endif]--> 

इसके अलावा स्क्रिप्ट IE7-js तरह गैर मानक कोड के साथ अपने सीएसएस को अव्यवस्थित बिना आप के लिए पीएनजी पारदर्शिता को संभाल लेंगे।

<!--[if lt IE 7]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<![endif]--> 

Answer 2

बस spliff का जवाब अलंकृत, मैं अपने पृष्ठ के लिए निम्न jQuery जोड़कर इस समस्या को ठीक कर सकते हैं:

$(function() { 
    if (jQuery.browser.msie) 
     $('img[src$=".png"]').each(function() { // must have quotes around .png 
      this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')"; 
     }); 
}); 

यह AlphaImageLoader भी पेज में सभी PNG का लागू होगी।

Answer 3

लोगों के लिए एक और उत्तर की तलाश करने के लिए, मैंने इसे निम्नलिखित कोड का उपयोग करके हल किया, मैंने खुद को सादे जावास्क्रिप्ट में लिखा, इसलिए यह ढांचा स्वतंत्र है। फिर भी आपको इसे अपने ढांचे के डोम तैयार कार्यक्रम के अंदर रखना होगा (या आप domready.js का उपयोग कर सकते हैं जैसे मैंने किया)। यह AlphaImageLoader के साथ पीएनजी एक्सटेंशन के साथ सभी छवियों को लोड करता है। इसे अल्फा फ़िल्टर लागू करने से पहले किया जाना है (आप जेएस के साथ इस कोड के बाद फ़िल्टर भी लागू कर सकते हैं)।

नीचे कोड:

var i; 
for (i in document.images) { 
    if (document.images[i].src) { 
     var imgSrc = document.images[i].src; 
     if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') { 
      document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')"; 
     } 
    } 
} 

सशर्त टिप्पणियों के अंदर यह IE के लिए डाल करने के लिए याद रखें:

<!--[if IE]><![endif]--> 

कृपया मुझे बताएं कि यह ठीक काम किया करते हैं। दयालु संबंध!