उन ब्राउज़रों में काम कर रहे पीएनजी पारदर्शिता को कैसे प्राप्त करें जो इसका समर्थन नहीं करते हैं?

Question

हमारा (प्यारा) डिजाइनर हमारे अनुप्रयोगों में उपयोग के लिए पारदर्शी पृष्ठभूमि के साथ पीएनजी फाइलें बना रहा है। मैं यह सुनिश्चित करना चाहता हूं कि पीएनजी की यह सुविधा "पुराने" ब्राउज़र में भी काम करेगी। सबसे अच्छा समाधान क्या है? नीचे

@mabwi & @syd

संपादन - या नहीं, मैं एक PNG के उपयोग के बारे सहमत बिंदु नहीं है। यह एक समस्या है जिसे मुझे हल करने की ज़रूरत है!

@ टिम सुलिवान - आईई 7.जेएस बहुत अच्छा लग रहा है, लेकिन मुझे नहीं लगता कि मैं अन्य सभी परिवर्तनों को एक एप्लिकेशन पेश करना चाहता हूं। मुझे एक समाधान चाहिए जो पीएनजी मुद्दे को विशेष रूप से ठीक करता है। लिंक के लिए धन्यवाद।

Answer 1

यहाँ एक महान लेख है कि स्पष्ट करता है और कैसे पुराने ब्राउज़र में पीएनजी पारदर्शिता को संभालने के लिए पता चलता है। इसका अल्फा मिश्रित नहीं है, लेकिन इसमें पारदर्शी पृष्ठभूमि हैं।

Answer 2

मुझे गलत हो सकता है, लेकिन मुझे यकीन है कि आईई 6 और कम पीएनजी फाइलों के साथ पारदर्शिता नहीं करते हैं।

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

Answer 3

IE7.js आईई 6 में पीएनजी (पारदर्शिता समेत) के लिए समर्थन प्रदान करेगा। http://www.alistapart.com/stories/pngopacity/

Answer 4

मेरा मानना ​​है कि सभी ब्राउज़रों का समर्थन पीएनजी-8:

Answer 5

मैंने पाया क्या यहाँ एक बहुत अच्छा समाधान दिखता है: Unit Interactive -> Labs -> Unit PNG Fix

अद्यतन यूनिट पीएनजी भी एक list of PNG fix options on NETTUTS

यहाँ पर चित्रित किया है उनकी वेबसाइट से मुख्य आकर्षण हैं:

• बहुत कॉम्पैक्ट जावास्क्रिप्ट: 1kb के तहत!
• IE के फ़िल्टर विशेषता के कारण कुछ इंटरैक्टिविटी समस्याओं को ठीक करता है।
• आईएमजी वस्तुओं और पृष्ठभूमि-छवि विशेषताओं पर काम करता है।
• स्वचालित रूप से चलाता है। आपको कक्षाओं को परिभाषित करने या फ़ंक्शंस को कॉल करने की आवश्यकता नहीं है।
• ऑटो चौड़ाई और ऑटो ऊंचाई तत्वों की अनुमति देता है।
• तैनात करने के लिए सुपर सरल।

Answer 6

मैं गलत हो सकता है, लेकिन मैं बहुत यकीन है कि IE6 हूँ और कम सिर्फ PNG फ़ाइलें के साथ पारदर्शिता नहीं करते हैं।

आप प्रकार हैं, और आप प्रकार नहीं हैं।

आईई 6 उनके लिए मूल रूप से कोई समर्थन नहीं है।

• सभी PNG छवियों खोजें:

  हालांकि, आईई पागल कस्टम जावास्क्रिप्ट/सीएसएस और COM ऑब्जेक्ट (जो कैसे वे मूल रूप से लागू किया XmlHttpRequest है)

  इन हैक्स के सभी मूल रूप से ऐसा करने के लिए समर्थन हासिल है

• उन्हें लोड करने के लिए एक DirectX छवि फिल्टर का प्रयोग करें और प्रारूप के कुछ प्रकार आईई समझता
• प्रतिलिपि फ़िल्टर्ड के साथ छवियों को बदलने के लिए एक पारदर्शी छवि का निर्माण।

Answer 7

मैंने .pngs के साथ साइट बनाने की कोशिश करने के साथ गड़बड़ कर ली है और यह सिर्फ इसके लायक नहीं है। साइट धीमी हो जाती है, और आप हैक्स का उपयोग करते हैं जो 100% काम नहीं करते हैं। यहां एक good article on some options है, लेकिन मेरी सलाह है कि gifs को तब तक काम करने का कोई तरीका ढूंढें जब तक आपको IE6 का समर्थन नहीं करना पड़े। या सिर्फ आईई 6 को एक अपमानजनक अनुभव दें।

Answer 8

आईई 6 में पीएनजी का उपयोग करना किसी भी अन्य ब्राउज़र की तुलना में शायद ही मुश्किल है। आप जावास्क्रिप्ट के बिना अपने सीएसएस में इसे सब कुछ समर्थन कर सकते हैं। मैं इस हैक से पहले दिखाया ...

div.theImage { 
    background : url(smile.png) top left no-repeat; 
    height  : 100px; 
    width  : 100px; 
} 

* html div.theImage { 
    background : none;  
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale"); 
} 

मैं इतना यकीन है कि यह मान्य सीएसएस है नहीं कर रहा हूँ देखा है, लेकिन साइट पर निर्भर करता है, यह बात बहुत ज्यादा नहीं हो सकता है।

(यह ध्यान देने योग्य है कि पहली छवि के लिए URL स्टाइलशीट, जहां दूसरे पृष्ठ की सूची पर आधारित है देखा जा रहा है की सूची पर आधारित है लायक है - इस प्रकार क्यों वे मेल नहीं खाते)

Answer 9

@ Hboss

यह सब ठीक और बेवकूफ है यदि आप वास्तव में सभी फाइलें (और प्रत्येक के आयाम) को जानते हैं जो आप प्रदर्शित करने जा रहे हैं - यह उस सीएसएस फ़ाइल को बनाए रखने के लिए शाही दर्द होगा, लेकिन मुझे लगता है कि यह संभव हो सकता है। जब आप कुछ सामान्य उद्देश्यों के लिए पारदर्शी पीएनजी का उपयोग शुरू करना चाहते हैं: ए) आकस्मिक ग्राफिक्स जैसे आइकन (शायद अलग आकार) जो किसी भी पृष्ठभूमि पर काम करते हैं, और बी) पृष्ठभूमि दोहराना; तो आप खराब हो गए हैं। मैंने कोशिश की हर कामकाज ने कुछ बिंदु पर एक ठोकर खाई मार दी है (पृष्ठभूमि पारदर्शी होने पर पाठ का चयन नहीं कर सकता है, कभी-कभी छवियां निराला आकार आदि पर प्रदर्शित होती हैं), और मैंने पाया है कि अधिकतम विश्वसनीयता के लिए मुझे gifs पर वापस जाना होगा।

मेरी सलाह है कि पीएनजी पारदर्शिता एक शॉट हैक करें, लेकिन साथ ही यह महसूस करें कि यह निश्चित रूप से सही नहीं है - और बस याद रखें, आप के उपयोगकर्ताओं के लिए पीछे की तरफ झुक रहे हैं जो 7 साल से अधिक पुराना है। मैं इन दिनों क्या करता हूं आईई 6 उपयोगकर्ताओं को साइट पर उनकी पहली विज़िट पर पॉपअप देता है, एक दोस्ताना अनुस्मारक के साथ कि उनका ब्राउज़र पुराना है और आधुनिक वेबसाइटों द्वारा आवश्यक सुविधाओं की पेशकश नहीं करता है, और हालांकि हम अपनी पूरी कोशिश करेंगे आपको सबसे अच्छा प्रदान करते हैं, अगर आप अच्छी तरह से अपरिवर्तित होते हैं तो आपको पूरी तरह से हमारी साइट और इंटरनेट से बेहतर अनुभव मिलेगा।

Answer 10

• जो IE PNG Fix 2.0background-position और -repeat का समर्थन करता है!

इसके अलावा पूर्ण अल्फा पारदर्शिता मौजूद हैं, क्या फ़ोटोशॉप और GIMP आपको लगता है कि हो सकता है के विपरीत के साथ 8-बिट PNG paletted, और वे IE6 में बेहतर नीचा - यह सिर्फ 1-बिट करने के लिए पारदर्शिता कटौती। 24-बिट पीएनजी से ऐसी फाइलें उत्पन्न करने के लिए pngquant का उपयोग करें।

Answer 11

ईमेल क्लाइंट के बारे में सोचने की एक बात है। आप अक्सर पीएनजी -24 पारदर्शिता चाहते हैं लेकिन आईई 6 का उपयोग कर मशीन के साथ Outlook 2003 में। ईमेल क्लाइंट सीएसएस या जेएस चाल की अनुमति नहीं देंगे।

यहां इसे संभालने का एक अच्छा तरीका है। http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 12

यदि आप अपनी छवियों को आतिशबाजी से पीएनजी -8 के रूप में निर्यात करते हैं तो वे gif छवियों के समान कार्य करेंगे। इसलिए वे शर्मीली और भूरे रंग की नहीं दिखेंगे, पारदर्शिता पारदर्शिता होगी लेकिन उनके पास 24 ब्राउज़र की पूर्णता नहीं होगी जो अन्य ब्राउज़र करते हैं।

आपकी समस्या पूरी तरह हल नहीं कर सकता है लेकिन कम से कम आप उन्हें फिर से निर्यात कर सकते हैं।