आईई 8

Question

में पीएनजी पारदर्शिता प्रोजेक्ट मुझे छवि के गैर पारदर्शी भाग के किनारे के आसपास काले रंग की पिक्सेल कलाकृतियों को दिखाते हुए एक पारदर्शी पीएनजी छवि के साथ समस्याएं आ रही हैं। यह केवल इंटरनेट एक्सप्लोरर में यह करता है और यह केवल से जावास्क्रिप्ट यह फाइल एक में प्रयोग किया जाता है यह करता है।

यहाँ क्या मैं के बारे में ... http://70.86.157.71/test/test3.htm (लिंक अब मृत) बात कर रहा हूँ ... में महिला नोटिस नीचे दाएं कोने। आईई 8 में उसके चारों ओर कलाकृतियां हैं (मैंने आईई के पिछले संस्करणों में इसका परीक्षण नहीं किया है, लेकिन मुझे लगता है कि यह शायद वही करता है)। यह फ़ायरफ़ॉक्स और क्रोम में पूरी तरह से काम करता है। माउसओवर प्रभाव उत्पन्न करने के लिए छवि जावास्क्रिप्ट फ़ाइल से लोड की गई है।

यदि आप छवि को स्वयं ही लोड करते हैं, तो यह ठीक काम करता है। यहां छवि है ... http://70.86.157.71/test/consultant2.png

क्या कोई इसे ठीक करने के बारे में जानता है?

छवि फ़ोटोशॉप सीएस 3 में बनाई गई थी।

मैंने गामा को हटाने के बारे में चीजें पढ़ी हैं, लेकिन यह स्पष्ट रूप से फ़ोटोशॉप के पिछले संस्करणों में थी और जब मैं इसे ट्वीकपीएनजी में लोड करता हूं, तो इसमें गामा नहीं होता है।

कृपया मदद करें!

Answer 1

बस जोड़ना चाहते हैं (चूंकि मैंने इस समस्या के लिए गुगल किया है, और यह प्रश्न पहले पॉप किया गया है) आईई 6 और अन्य संस्करण पीएनजी पारदर्शिता को बहुत बदसूरत प्रस्तुत करते हैं। यदि आपके पास पीएनजी छवि है जो अल्फा पारदर्शी (32 बिट) है और इसे कुछ जटिल पृष्ठभूमि पर दिखाना है, तो आप इसे IE में कभी भी नहीं कर सकते हैं। लेकिन जब तक आप उस पीएनजी छवियों (या divs) सीएसएस विशेषता background-color को माता-पिता background-color के समान होने के लिए सेट करते हैं, तब तक आप इसे एक रंगीन पृष्ठभूमि पर सही तरीके से प्रदर्शित कर सकते हैं।

तो इस काले जहां छवि अल्फा पारदर्शी होना चाहिए, और पारदर्शी प्रस्तुत करना होगा, जहां अल्फा बाइट 0 है:

<div style="background-color: white;">  
    <div style="background-image: url(image.png);"/>  
</div> 

और यह सही ढंग से प्रस्तुत करना होगा (भीतरी div में पृष्ठभूमि रंग विशेषता पर ध्यान दें) : जो एक जटिल पृष्ठभूमि के ऊपर अल्फा छवि सक्षम बनाता है यह करने के लिए

<div style="background-color: white;">  
    <div style="background-color: white; background-image: url(image.png);"/>  
</div> 

परिसर विकल्प AlphaImageLoader उपयोग करने के लिए लोड और कुछ अस्पष्टता की छवि प्रस्तुत करने के लिए है। यह तब तक काम करता है जब तक आप उस अस्पष्टता को बदलना नहीं चाहते ... विस्तार से समस्या और इसका समाधान (जावास्क्रिप्ट) HERE पाया जा सकता है।

Answer 2

तय!

मैं एक ही मुद्दे के साथ कुश्ती कर रहा हूं, और बस एक सफलता थी! हमने पाया है कि यदि आप छवि को पृष्ठभूमि रंग या छवि देते हैं, तो पीएनजी इसके शीर्ष पर ठीक से प्रदर्शित होता है। काला सीमा चली गई है, लेकिन अब आपके पास एक अपारदर्शी पृष्ठभूमि है, और यह काफी उद्देश्य को हरा देता है।

तब मुझे एक आरजीबीए याद आया जैसे कि फ़िल्टर कनवर्टर मैं आया था। (धन्यवाद माइकल बेस्टर के लिए)। तो मैं सोचा कि अगर मैं अपने समस्या PNG का एक यानी फ़िल्टर्ड RGBA नकल पृष्ठभूमि (255,255,255,0) दे दी है, पूरी तरह से यह काम करने के लिए नहीं की उम्मीद कर क्या होगा, लेकिन वैसे भी यह कोशिश की सुविधा देता है ...

.item img { 
    background: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */  
    zoom: 1; 

} 

Presto! अलविदा काला, और हैलो 7 और 8 में अल्फा चैनल काम कर रहे हैं।अपने पीएनजी को अंदर और बाहर फीका, या स्क्रीन पर उन्हें एनिमेट करें - यह सब अच्छा है।

Answer 3

मैं एक jQuery प्लगइन में डाल इसे और अधिक मॉड्यूलर बनाने के लिए (आप पारदर्शी gif आपूर्ति):

$.fn.pngFix = function() { 
    if (!$.browser.msie || $.browser.version >= 9) { return $(this); } 

    return $(this).each(function() { 
    var img = $(this), 
     src = img.attr('src'); 

    img.attr('src', '/images/general/transparent.gif') 
     .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')"); 
    }); 
}; 

उपयोग:

$('.my-selector').pngFix(); 

नोट: यह भी काम करता है अगर आपकी छवियों पृष्ठभूमि हैं इमेजिस। बस div पर फ़ंक्शन लागू करें।

Answer 4

दान टेलो फिक्स ने मेरे लिए अच्छा काम किया।

आईई 8 के साथ मिला एक अतिरिक्त मुद्दा यह था कि यदि पीएनजी पीएनजी की तुलना में छोटी सीएसएस चौड़ाई या ऊंचाई आयाम वाले डीआईवी में आयोजित किया गया था तो ब्लैक एज प्रोब फिर से ट्रिगर किया गया था।

चौड़ाई और ऊंचाई सीएसएस को सुधारना या उन्हें पूरी तरह से ठीक करना।

Answer 5

PNG transparency prоblеm in IE8

दान के समाधान मेरे लिए काम किया। मैं एक पृष्ठभूमि छवि के साथ एक div फीका करने की कोशिश कर रहा था। चेतावनी: आप सीधे div को फीका नहीं कर सकते, बजाय एक रैपर छवि फीका। इसके अलावा, एक पृष्ठभूमि चित्र लागू करने के लिए निम्न फ़िल्टर जोड़ें:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */  

कृपया ध्यान दें कि फिल्टर के src विशेषताओं में पथ निरपेक्ष हैं, और सीएसएस चादर के सापेक्ष नहीं।

मैं भी कहा:

background: transparent\9; 

इस कारण आईई अन्य ब्राउज़र के लिए वास्तविक पृष्ठभूमि छवि के अपने पहले घोषणा की अनदेखी करने के।

धन्यवाद दान !!!

Answer 6

मेरे परिदृश्य:

• मैं एक पृष्ठभूमि छवि है कि एक 24bit अल्फा png है कि एक लंगर लिंक करने के लिए स्थापित किया गया था था।
• एंकर Jquery का उपयोग कर होवर पर फीका हुआ था।

उदाहरण के लिए।

a.button { background-image: url(this.png; } 

मैंने पाया कि मार्क-अप दान टेलो द्वारा प्रदान लागू करने के काम नहीं किया।

हालांकि, एंकर तत्व के भीतर एक अवधि रखकर, और उस तत्व को पृष्ठभूमि-छवि सेट करके मैं दान टेलो के मार्कअप का उपयोग करके एक अच्छा परिणाम प्राप्त करने में सक्षम था।

उदाहरण के लिए।

a.button span { background-image: url(this.png; } 

Answer 7

मैं अंदर

पारदर्शी PNG के साथ अपने दौर कोनों परत वैकल्पिक हल के लिए जे एस के बजाय एक सीएसएस फिक्स का उपयोग का प्रयास करें

 
.ie .whateverDivWrappingTheImage img { 
background: #ffaabb; /* this should be the background color matching your design actually */ 
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */ 
} 

यह IE9 या बाद में अधिक काम की आवश्यकता हो सकती।

Answer 8

मेरे पास एक पीएनजी के साथ पारदर्शिता के साथ एक ही बात होती है जिसे < ए > तत्व की पृष्ठभूमि-छवि के रूप में सेट किया गया था, जिसमें अस्पष्टता लागू होती है।

फिक्स < ए > तत्व के पृष्ठभूमि-रंग को सेट करना था।

तो, निम्नलिखित:

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

बदल जाता है में:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */ 
background-color: #FFFFFF; 

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

Answer 9

मैं जानता हूँ कि इस सूत्र मौत हो चुकी है कुछ समय है, लेकिन यहां वर्ष IE8 png पृष्ठभूमि मुद्दे पर एक और जवाब है।

साथ ही आप इस तरह IE के स्वामित्व को छानने प्रणाली का उपयोग करके सीएसएस में यह कर सकते हैं:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

आप के लिए 'पहले एक blank.gif का उपयोग करने की आवश्यकता होगी 'आपकी पृष्ठभूमि घोषणा में छवि। यह केवल ie8 को भ्रमित करने और इसे आपके द्वारा सेट किए गए फ़िल्टर और पृष्ठभूमि दोनों का उपयोग करने से रोकने के लिए है, और केवल फ़िल्टर का उपयोग करें। अन्य ब्राउज़र कई पृष्ठभूमि छवियों का समर्थन करते हैं और पृष्ठभूमि घोषणा को समझेंगे और फ़िल्टर को समझ नहीं पाएंगे, इसलिए केवल पृष्ठभूमि का उपयोग कर रहे हैं।

आपको जिस तरीके से काम करना है, उसे पाने के लिए आपको फ़िल्टर में साइजिंग विधि के साथ भी खेलना होगा।

Answer 10

कृपया कोड के नीचे प्रयास करें।

background: transparent\0/; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */ 

अंततः एक png, जो समस्या का कारण प्रतीत होता करने के लिए