«
»

چه كنيم كه فايلهاي 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

This entry was posted on سپتامبر 6, 2007 at 12:42 ق.ظ. and is filed under نكته، ترفند، آموزش, طراحی صفحات وب. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

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

  1. moryabdi Says:
    سپتامبر 6, 2007 در 2:44 ق.ظ.

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

  2. مجازاتگر Says:
    سپتامبر 6, 2007 در 3:55 ق.ظ.

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

  3. مجازاتگر Says:
    سپتامبر 6, 2007 در 4:00 ق.ظ.

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

  4. نوسانگر Says:
    سپتامبر 6, 2007 در 3:28 ب.ظ.

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

  5. علیرضا Says:
    سپتامبر 6, 2007 در 9:21 ب.ظ.

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

  6. Kia Taheri Says:
    سپتامبر 6, 2007 در 9:43 ب.ظ.

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

  7. عرفان Says:
    سپتامبر 23, 2007 در 4:29 ب.ظ.

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

  8. کاوه Says:
    مارس 11, 2008 در 1:33 ق.ظ.

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

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