چه كنيم كه فايلهاي PNG در Internet Explorer هم پس زمينه شفاف داشته باشند

همانطور كه حتما قبلا هم مشاهده كرديد، اگر در صفحه اي از وب از تصاوير PNG كه زمينه شفاف-transparent دارند استفاده شود، اينترنت اكسپلورر يك نقطه بزرگ سفيد رنگ در صفحه نشان خواهد داد. اين آموزش توضيح مي دهد كه چگونه مي توان اين مشكل را حل كرد. ابتدا يك تصوير PNG را مستقيما وارد صفحه مي كنيم و با دو مرورگر رايج پيش نمايش آنرا مي بينيم.

PNG Image in FirefoxMozilla Firefox – مشكلي نيست و شفافيت تصوير به خوبي نمايان است.

PNG Image in Internet ExplorerInternet Explorer – لاكردار تصوير را حسابي خراب نموده است! راه حل براي ذخيره تصوير يك كانتينر-container ايجاد كنيد. براي مثال در اينجا از يك <div> استفاده مي كنم. تگ <div> را مانند زير درون تگ <body> قرار دهيد:

<body> <div class="flower"></div> </body>

حالا اگر تگ <style> نداريد آنرا ايجاد كنيد. اين تگ را حتما مابين تگ هاي <head> و </head> قرار بدهيد. سپس اين css را درون كد بگذاريد:

<style>

 

body {background-color:#000} div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

</style>

 

 

كدهاي CSS بالا تصوير PNG را درون يك تگ <div> نمايش مي دهند. اين كد در موزيلا فايرفاكس خوب جواب مي دهد، اما در اينترنت اكسپلورر نه. باري اينكه در هر دو مرورگر كار كند، يك سري ديگر از css را كه مخصوص Internet Explorer است در زير <style> </style> بنويسيد. كدهاي زير را اضافه كنيد:


<!–[if gte IE 5]>
<style type="text/css">
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}
</style>
<![endif]–>

حالا ديگر IE هم يك تصوير كامل و زيبا مانند زير نشان خواهد داد.

 PNG Image in Internet Explorer-OK

كلمات كليدي: PNG، transparency،transparent، Internet Explorer، زمينه، شفاف، شفافيت، اينترنت اكسپلورر
لينك به منبع لاتين:
Make PNG transparency work in Internet Explorer
دانلود كد:
transparency.zip

8 پاسخ to “چه كنيم كه فايلهاي PNG در Internet Explorer هم پس زمينه شفاف داشته باشند”

  1. moryabdi Says:

    کی میره این همه راه رو ماکروخفت ارزش این دردسر ها رو نداره…با فایرفاکس حال میکنیم…
    این فقط توی IE 5 هست دیگه…وگرنه فاتحه IE 7 رو باید خوند که…
    بعد از این جمله «لاكردار تصوير را حسابي خراب نموده است!» توی یه مقاله کاملا علمی خیلی خوشمان آمد… موفق باشی :دی…

  2. مجازاتگر Says:

    آموزش بسيار جالب و در بعضي موارد بسيار كاربردي بود اما بهتر نيست كه همان عكس را با كمي حوصله در فتوشاپ (نسبت به محل به كار رفته ) مش كرد. بعد هم آن را با پسوند jpg يا gif دخيره و مورد استفاده قرار داد.

  3. مجازاتگر Says:

    آموزش بسيار كاربردي بود مخصوصاً براي طراحي سايت و وب. اما براي مطالب و جاهاي عادي بهتر نيست ابتدا فايل را با فتوشاپ نسبت به منطقه مورد استفاده «مش» كنيم و بعد مورد با پسوند jpg يا gif ذخيره كرده و مورد استفاده قرار دهيم!

  4. نوسانگر Says:

    پست قبليت خيلي باحال بود و مارو به عوالم بچگي و ديدن آقا برد! كه كاشكي نمي بردن ببينيمش. يه خورده چيزي هم كه پيش ما داشت همون موقع رفت

  5. علیرضا Says:

    اینترنت اکسپلورر مگه وجود خارجی هم داره!!

  6. Kia Taheri Says:

    نگران نباش ! این مشکل در اینترنت اکسپلورر 7 برطرق شده است!
    لطفا اینترنت اکسپلورر خود را ارتقا دهید !

  7. عرفان Says:

    بسیار جالب و بسیار کاربردی. تشکرات ویژه یی انجام می دهم از شما!

  8. کاوه Says:

    خیلی ممنون .من که خیلی وقته دنبالشم. مرسی.

دیدگاه‌ها بسته شده‌اند.


%d وب‌نوشت‌نویس این را دوست دارند: