كيف يمكن تفعيل شفافية PNG في المتصفحات التي لا تدعمها أصلاً؟

Question

يواصل مصممنا (الحبيب) إنشاء ملفات PNG بخلفيات شفافة لاستخدامها في تطبيقاتنا.أود التأكد من أن ميزة PNG هذه تعمل في المتصفحات "الأقدم" أيضًا.ما هو الحل الأفضل؟

التعديلات أدناه

@mabwi & @syd - ما إذا كنت أوافق على استخدام PNG أم لا ليس هو الهدف.هذه مشكلة يجب أن أحلها!

@ Tim Sullivan - يبدو IE7.js رائعًا جدًا، لكنني لا أعتقد أنني أريد تقديم جميع التغييرات الأخرى في التطبيق.أرغب في حل يعمل على إصلاح مشكلة PNG حصريًا.شكرا على الرابط.

Answer 1

إليك مقالة رائعة تشرح وتوضح كيفية التعامل مع شفافية PNG في المتصفحات القديمة: http://www.alistapart.com/stories/pngopacity/

Answer 2

لقد وجدت ما يبدو أنه حل جيد جدًا هنا: الوحدة التفاعلية -> المختبرات -> وحدة PNG Fix

تحديث وحدة PNG واردة أيضًا على ملف قائمة بخيارات إصلاح PNG على NETTUTS

فيما يلي أبرز ما جاء في موقعهم الإلكتروني:

• جافا سكريبت مضغوط جدًا:أقل من 1 كيلو بايت!
• إصلاح بعض مشاكل التفاعل الناجمة عن سمة مرشح IE.
• يعمل على كائنات img وسمات صورة الخلفية.
• يعمل تلقائيا.ليس عليك تحديد الفصول أو وظائف الاتصال.
• يسمح بالعرض التلقائي وعناصر الارتفاع التلقائي.
• بسيطة للغاية للنشر.

Answer 3

• آي بي إن جي فيكس 2.0 الذي يدعم background-position و -repeat!

تم تلوينها أيضًا بصيغة PNG 8 بت شفافية ألفا الكاملة موجودة، على عكس ما قد يجعلك تعتقده Photoshop وGIMP، وهي تتدهور بشكل أفضل في IE6 - فهي تقلل الشفافية إلى 1 بت فقط.يستخدم pngquant لإنشاء مثل هذه الملفات من ملفات PNG ذات 24 بت.

Answer 4

IE7.js سيوفر الدعم لملفات PNG (بما في ذلك الشفافية) في IE6.

Answer 5

لقد أخطأت في محاولة إنشاء موقع بصيغة png. والأمر لا يستحق ذلك.يصبح الموقع بطيئا، وتستخدم حيل لا تعمل 100%.وهنا أ مقالة جيدة عن بعض الخيارات, ، لكن نصيحتي هي إيجاد طريقة لجعل الصور المتحركة تعمل حتى لا تضطر إلى دعم IE6.أو فقط قم بإعطاء IE6 تجربة متدهورة.

Answer 6

يعد استخدام PNGs في IE6 أكثر صعوبة من أي متصفح آخر.يمكنك دعم كل ذلك في CSS الخاص بك بدون Javascript.لقد رأيت هذا الاختراق معروضًا من قبل ...

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

لست متأكدًا من أن هذا CSS صالح، ولكن اعتمادًا على الموقع، قد لا يهم كثيرًا.

(تجدر الإشارة إلى أن عنوان URL للصورة الأولى يعتمد على دليل ورقة الأنماط، بينما يعتمد الثاني على دليل الصفحة التي يتم عرضها - ولهذا السبب لا يتطابقان)

Answer 7

@هبوس

كل هذا جيد ورائع إذا كنت تعرف بالضبط جميع الملفات (وأبعاد كل منها) التي ستعرضها - سيكون من الصعب للغاية الحفاظ على ملف CSS هذا، لكنني أفترض أنه سيكون ممكنًا.عندما تريد البدء في استخدام ملفات PNG الشفافة لبعض الأغراض الشائعة جدًا:أ) الرسومات العرضية مثل الأيقونات (ربما ذات أحجام مختلفة) التي تعمل على أي خلفية، و ب) الخلفيات المتكررة؛ثم كنت ثمل.كل الحلول البديلة التي جربتها واجهت حجر عثرة في مرحلة ما (لا يمكنني تحديد النص عندما تكون الخلفية شفافة، أحيانا يتم عرض الصور بأحجام غريبة، وما إلى ذلك)، ولقد وجدت أنه لتحقيق أقصى قدر من الموثوقية، يجب أن أعود إلى صور GIF.

نصيحتي هي تجربة اختراق شفافية PNG، ولكن في الوقت نفسه عليك أن تدرك أنها ليست مثالية بالتأكيد - وتذكر فقط أنك تنحنى للخلف لمستخدمي متصفح عمره أكثر من 7 سنوات.ما أفعله هذه الأيام هو إعطاء مستخدمي IE6 نافذة منبثقة عند زيارتهم الأولى للموقع، مع تذكير ودود بأن المتصفح الخاص بهم قديم ولا يقدم الميزات التي تتطلبها مواقع الويب الحديثة، وعلى الرغم من أننا سنبذل قصارى جهدنا نقدم لك الأفضل، وستحصل على تجربة أفضل من موقعنا والإنترنت ككل إذا قمت بالترقية بشكل جيد.

Answer 8

أعتقد أن جميع المتصفحات تدعم PNG-8.إنه ليس مزيج ألفا، لكنه يحتوي على خلفيات شفافة.

Answer 9

قد أكون مخطئًا، لكنني متأكد تمامًا من أن IE6 وأقل منه لا يقوم بالشفافية مع ملفات PNG.

أنت نوعًا ما، وأنت لست كذلك.

IE6 ليس لديه دعم أصلي لهم.

ومع ذلك، فإن IE لديه دعم لكائنات javascript/css وCOM المخصصة (وهي الطريقة التي قاموا بها في الأصل بتنفيذ XmlHttpRequest)

كل هذه الاختراقات تقوم بشكل أساسي بما يلي:

• البحث عن جميع الصور بصيغة png
• استخدم مرشح صور DirectX لتحميلها وإنتاج صورة شفافة بنوع من التنسيق الذي يفهمه IE
• استبدل الصور بالنسخة المصفاة.

Answer 10

شيء واحد يجب التفكير فيه هو عملاء البريد الإلكتروني.غالبًا ما تريد شفافية PNG-24 ولكن في Outlook 2003 باستخدام جهاز يستخدم IE6.لن يسمح عملاء البريد الإلكتروني بحيل CSS أو JS.

هنا طريقة جيدة للتعامل مع ذلك.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 11

إذا قمت بتصدير صورك بتنسيق PNG-8 من Fireworks، فستعمل بنفس طريقة عمل صور GIF.لذا فإنها لن تبدو سيئة ورمادية، بل ستكون الشفافية هي الشفافية، ولكنها لن تتمتع بالجمال الكامل الذي تتمتع به المتصفحات الأخرى.

قد لا يحل مشكلتك تمامًا ولكن على الأقل يمكنك قطع طريق جزئي من خلال إعادة تصديرها.

Answer 12

قد أكون مخطئًا، لكنني متأكد تمامًا من أن IE6 وأقل منه لا يقوم بالشفافية مع ملفات PNG.

لدي "حلان" أستخدمهما.قم بإنشاء ملفات GIF بشفافية واستخدمها في كل مكان، أو استخدمها فقط مع IE 6 والإصدارات الأقدم مع أوراق الأنماط الشرطية.الخيار الثاني لا يعمل إلا إذا كنت تستخدمه كخلفيات، وما إلى ذلك.