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

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

नीचे संपादन

@mabwi & @syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!

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

0
ro fr bn

12 उत्तर

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

आप तरह हैं, और आप तरह के नहीं हैं।

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

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

ये सभी हैक्स मूल रूप से ऐसा करते हैं:

  • सभी पीएनजी छवियां खोजें
  • उन्हें लोड करने के लिए एक डायरेक्टएक्स छवि फ़िल्टर का उपयोग करें और किसी प्रकार के प्रारूप में एक पारदर्शी छवि उत्पन्न करें IE समझता है
  • छवियों को फ़िल्टर की गई प्रतिलिपि से बदलें।
0
जोड़ा

मुझे विश्वास है कि सभी ब्राउज़र पीएनजी -8 का समर्थन करते हैं। इसका अल्फा मिश्रित नहीं है, लेकिन इसमें पारदर्शी पृष्ठभूमि हैं।

0
जोड़ा
पीएनजी -8 कर सकते हैं अल्फा मिश्रित हो। आप शायद फ़ोटोशॉप में बग/सीमा का जिक्र कर रहे हैं।
जोड़ा लेखक Kornel, स्रोत

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

0
जोड़ा

I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix

update Unit PNG is also featured on a list of PNG fix options on NETTUTS

यहां उनकी वेबसाइट से हाइलाइट्स दिए गए हैं:

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

IE7.js will provide support for PNGs (including transparency) in IE6.

0
जोड़ा
मैंने कई समाधानों की कोशिश की, लेकिन इसने वास्तव में नौकरी की! और इसमें कई अन्य सुन्दर विशेषताएं हैं क्योंकि यह माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर को मानक-अनुरूप ब्राउज़र की तरह व्यवहार करने की कोशिश करता है। यह कई एचटीएमएल और सीएसएस मुद्दों को हल करता है और आईई 5 और आईई 6 के तहत पारदर्शी पीएनजी काम सही बनाता है।
जोड़ा लेखक Kasper, स्रोत
इसलिए मैं इसे सबको सलाह देता हूं! (अतिरिक्त टिप्पणी के लिए खेद है)
जोड़ा लेखक Kasper, स्रोत

Here is a great article that explains and shows how to handle PNG transparency in older browsers: http://www.alistapart.com/stories/pngopacity/

0
जोड़ा
वह लेख काफी दिनांकित है और बहुत लंगड़ा ब्राउज़र पहचान का उपयोग करता है। इसके मुकाबले बहुत अधिक सुरुचिपूर्ण समाधान हैं, उदा। twinhelix.com/css/iepngfix
जोड़ा लेखक Kornel, स्रोत

@Hboss

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

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

0
जोड़ा
जिस साइट को मैं बनाए रखता हूं उसे लगभग 40% आईई 7, 32% आईई 6 और 18% फ़ायरफ़ॉक्स मिला है।
जोड़ा लेखक nickf, स्रोत
200 9 में अब तक हमारी साइट आईई 6 का उपयोग कर 13% लोगों को मिल रही है। यह यातायात अभी फेसबुक से लगभग पूरी तरह से आ रहा है - इसलिए आपके औसत फेसबुक उपयोगकर्ताओं का लगभग 13% आईई 6 पर हैं। sux लेकिन वास्तविकता है
जोड़ा लेखक Simon_Weaver, स्रोत

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

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

0
जोड़ा

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

0
जोड़ा
अल्फा चैनल के साथ 8-बिट पीएनजी ने कहा कि आतिशबाजी से आसानी से निर्यात किया जा सकता है। "ऑप्टिमाइज़ और एलाइन" पैलेट में, "पीएनजी 8" और "अल्फा पारदर्शिता" चुनें। मुझे फ़ोटोशॉप (सीएस 3 के रूप में) में यह क्षमता नहीं मिल रही है।
जोड़ा लेखक Taylor Edmiston, स्रोत

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

मुझे यकीन नहीं है कि यह वैध सीएसएस है, लेकिन साइट पर निर्भर करता है, इससे कोई फर्क नहीं पड़ता।

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

0
जोड़ा

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

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

0
जोड़ा
आप गलत कर रहे हैं
जोड़ा लेखक Salvin Francis, स्रोत
आईई 6 में पीएनजी पारदर्शिता की अनुमति देने के लिए सीएसएस फिल्टर का उपयोग करें
जोड़ा लेखक Salvin Francis, स्रोत

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

Here is a good way to handle that. http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

0
जोड़ा