2009-03-19 16 views
18

में एक पीएनजी का पृष्ठभूमि रंग मेरे पास निम्न लोगो है, जो एफएफ 3, क्रोम (# 363636) में एचटीएमएल बॉडी के समान पृष्ठभूमि रंग के रूप में प्रदर्शित होता है।आईई 8

लेकिन आईई 8 में यह एक अलग, गहरा रंग प्रदर्शित करता है।

क्या यह एफएफ 3/क्रोम मेरे पीएनजी को क्षमा कर रहा है, या सिर्फ एक और आईई बग (मैंने सोचा कि उन्होंने आईई 7 में पीएनजी समर्थन तय किया है)?

अद्यतन: मैं अभी भी इस समस्या को मिलता है, और pngcrush तर्क मैं इसे सही करने के लिए का उपयोग कर रहे हैं:

pngcrush -replace_gamma ०.५१८१३४७ outfile.png

Win32 द्विआधारी infile.png लिंक here है।

उत्तर

22

आपके पास अपने पीएनजी में गामा सुधार जानकारी (गामा खंड) संरचना है। यह ठीक है अगर आप उन फ़ोटो के साथ काम कर रहे हैं जहां आप गामा सुधार चाहते हैं, लेकिन यह वेब के लिए सही बात नहीं है।

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

लोगो को एक छवि संपादक में लोड करें और गामा चंक जानकारी के बिना इसे वापस सहेजें। More

+0

मैंने फ़ोटोशॉप के माध्यम से इसे (मूल रूप से एक जेपीजी) बचाया - तो क्या यह आईई गलत व्यवहार कर रहा है? या इसे सही ढंग से कर रहे हैं –

+0

कभी नहीं "कुछ ब्राउज़र इस सटीक कारण के लिए पीएनजी गामा लागू नहीं करते हैं, यही कारण है कि आप परिवर्तनीय परिणाम प्राप्त कर रहे हैं" उत्तर –

+0

यह तर्कसंगत है। एक अर्थ में आईई पीएनजी में गामा की जानकारी का सम्मान करने का अधिकार है, लेकिन यह आईई के हर चीज के साथ असंगत है। यदि फ़ोटोशॉप जीएएमए के बिना पीएनजी को नहीं बचा सकता है, तो (ए) यह थोड़ा बकवास है, और (बी) आप इसे गिंप या पीएनजीक्रश का उपयोग करके ठीक कर सकते हैं। – bobince

0

आपको अपने पीएनजी से दोनों गामा और एसआरबीबी भाग को हटाने की जरूरत है। इसके अतिरिक्त आपको छवि से जुड़े किसी भी आईसीसी रंग/रंग प्रोफाइल को हटाने की आवश्यकता है।

फ़ोटोशॉप "वेब करने के लिए सहेजें" एक मानक sRGB ICC प्रोफ़ाइल कहते हैं - कि छवियों सामग्री के लिए बेहतरीन लेकिन स्टाइल छवियों जहां सीएसएस रंग के मिलान करने की आवश्यकता के लिए पूरी तरह से गलत है।

यह सफारी में विशेष रूप से ध्यान देने योग्य है - जिसके बारे में मेरे पास blog post है।

0

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

यदि यह काम नहीं करता है, तो गिंप में फिर से लोड करें, पृष्ठभूमि को सफेद पर सेट करें, फ़्लैटन छवि चुनें, फ़ज़ी चयन थ्रेसहोल्ड को 3% पर सेट करें, उस पृष्ठभूमि का चयन करें जिसे आप हटाना चाहते हैं, हटाएं (साफ़ करें) चुनें, फिर 150% पर थ्रेसहोल्ड के साथ फिर से पृष्ठभूमि का चयन करें, हटाएं, और उसके बाद छवि को पुन: सहेजें।

मेरे अस्पष्ट चयन उपकरण पर ध्यान दें मेरी जिंप सेटिंग्स एंटीअलाइजिंग की जांच कर रही थी, पंख किनारों को अनचेक करें, ट्रांसपेरेंट एरिया का चयन करें, नमूना विलय अनचेक करें, और समग्र द्वारा चुनें।

हाँ, यह पीएनजी छवियों के साथ एक आईई बग प्रतीत होता है जिसमें पारदर्शी पृष्ठभूमि होती है। अन्य ब्राउज़रों में से कोई भी नहीं - ओपेरा, सफारी, फ़ायरफ़ॉक्स, क्रोम - इस समस्या को है। मेरा संदेह यह है कि कुछ छवि कार्यक्रम किनारों पर किसी प्रकार के एंटीअलाइजिंग के हिस्से के रूप में 50% पारदर्शिता की तरह सेट कर रहे हैं, क्योंकि यह केवल किनारों की समस्या है।मुझे लगता है कि गैर-आईई ब्राउज़र एक पिक्सेल पर 50% पारदर्शिता का संचालन कर रहे हैं, लेकिन आईई केवल पिक्सेल पर 100% पारदर्शिता की तरह समझ सकता है - बस एक झटका।

6

शीर्ष रेटेड उत्तर यहां pngcrush का उपयोग करके 0.5181347 के गामा मान पर एक विचित्र रीसेट सुझाता है। यह कुछ सार्वभौमिकों में काम कर सकता है, लेकिन हमारे सबसे अच्छे रास्ते में पीएनजी से सभी रंग-स्थान की जानकारी को पट्टी करना है ताकि इसे पूरी तरह से उसी तटस्थ आरजीबी-ट्रिपलेट स्पेस में प्रस्तुत किया जा सके जो ब्राउज़र सीएसएस में रंगों के लिए उपयोग कर रहे हैं:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png 

वास्तविक रंग-सिर के लिए इसका क्या अर्थ है कि आपके द्वारा डिज़ाइन किया गया मूल रंग किसी अन्य मॉनिटर या ऑपरेटिंग सिस्टम पर समान नहीं दिखाई दे सकता है, लेकिन आपके सभी रंगों को एक ही आरजीबी मानों के साथ समान रूप से प्रस्तुत किया जाएगा ब्राउज़र के अनुसार वे ओएस पर हैं। विशेष रूप से, पीएनजी को अपनाने वाली पृष्ठभूमि या आसन्न रंग मेल खाते हैं, इसलिए आप अपनी साइट को इंटरलॉकिंग छवियों और रंगों के साथ डिज़ाइन कर सकते हैं। http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8

+0

pngcruch यहां है: http://sourceforge.net/projects/pmt/files/pngcrush-executables/1.7.85/ –

0

यह एकमात्र समाधान है कि मेरे लिए काम किया है। समाधान पीएनजी छवि से गामा खंड को हटाने के लिए है (उदाहरण के लिए TweakPNG उपयोगिता का उपयोग कर)। यह छवियों को इंटरनेट एक्सप्लोरर में सही रंगों में प्रस्तुत करता है। कुछ असामान्य ब्राउज़र अभी भी गलत तरीके से व्यवहार कर सकते हैं।

2

मैं PNG Color Problem in Internet Explorer और स्क्रीन शॉट्स के साथ अपने समाधान चर्चा की है:

+0

+1, बहुत रोचक और अच्छी तरह से किया स्पष्टीकरण धन्यवाद। –

0

दूसरों के लिए यह जानना उपयोगी हो सकता है कि वेब के लिए छवियों को अनुकूलित करने के लिए Yahoo Smushit का उपयोग करके मेरे लिए इस समस्या को सही किया गया है (और सामान्य रूप से इस छवि के माध्यम से अपनी छवियों को चलाने के लिए यह एक अच्छा विचार है)।