في الأصل كانت مجرد صورة شفافة بتنسيق png، ومن السهل حلها ضمن IE، وقد جربت أيضًا العديد من الطرق، بما في ذلك طريقة js وطريقة مرشح css وما إلى ذلك، لكنني أشعر أنها ليست مثالية بشكل عام، وإذا استخدمتها. طريقة العفاريت في نفس الوقت، الأمر ليس بهذه البساطة والسهولة.
أخيرًا، وجدت أن استخدام طريقة htc للتضمين في ملفات css يمكن أن يحل معظم مشكلات الشفافية مرة واحدة.
لقد تم تقديم هذه الطريقة من قبل العديد من الأشخاص، ولكن نظرًا لأن الصفحة باللغة الإنجليزية، فقد قام عدد قليل من الأشخاص بترجمتها، ولن يستخدمها سوى عدد قليل من الأشخاص.
يتم تقديم هذه الطريقة بالتفصيل أدناه:
العنوان التجريبي لهذه الطريقة نفسها: http://www.twinhelix.com/css/iepngfix/demo/
(كما قلت، كل شيء باللغة الإنجليزية، لا تقلق)
يمكن حلها عن طريق:
1. استخدم علامة "img" لإضافة الصورة الشفافة بتنسيق png إلى الصفحة
2. استخدم الخلفية لإضافة خلفية شفافة بتنسيق png في CSS (يدعم إصدارات متعددة)
3. بعض إصدارات الخلفية بتنسيق png شفافة وتحتاج إلى حلها عن طريق إضافة js إلى الصفحة الحالية.
تنزيل حزمة الملفات: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
1. بعد التنزيل وفك الضغط، سيكون هناك العديد من الملفات، من بينها 3 ملفات نحتاج إلى استخدامها:
iepngfix.htc، وblank.gif، وiepngfix_tilebg.js
2. يمكنك نقلها إلى أدلة CSS وJS والصور المقابلة على التوالي، بالطبع، يمكنك أيضًا إنشاء مجلد جديد، مثل المجلد المسمى: iepng، ونقلها إليه.
3. أضف الجملة الأولى من الكود. هذا هو التنسيق المضاف في ملف html. لا تنس تعديل مسار ملف htc، إذا كنت تخشى حدوث أخطاء، فاستخدم المسار المتعلق بالدليل الجذر مباشرةً مثل /iepng/iepngfix.htc هذا الخطأ لا يعمل بشكل عام، بالطبع يمكنك أيضًا إضافة السلوك: url (iepngfix.htc) إلى ملفset.css الخاص بك.
| <نمط النوع = "نص/CSS"> img, div { السلوك: url(iepngfix.htc }); </نمط> |
4. استخدم برنامج "المفكرة" أو أداة مشابهة لفتح ملف iepngfix.htc واستبدال مسار ملف فارغ Img بمسار خاص بك، مثل /iepng/blank.gif، وفقًا لموقفك الفعلي.
| IEPNGFix.blankImg = '/images/blank.gif'; |
5. أضف رمز استدعاء js التالي إلى "رأس" الصفحة المطلوبة (هذه الخطوة ليست ضرورية. إذا كان التضمين الخاص بك في جزء الرأس يسمى بشكل موحد، فمن المستحسن إضافة هذه الجملة)
| <script type="text/javascript" src="iepngfix_tilebg.js"></script> |
بعد الخطوات المذكورة أعلاه، يمكنك تحقيق التأثير الشفاف لـ png ضمن IE.