آموزش 1/7 : مخفی کردن پس زمینه Transparent عکس های PNG در IE

شروع موضوع توسط echessdesign ‏10 آگوست 2007 در انجمن زبان HTML

  1. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,374
    تشکر شده:
    3,829
    امتیاز دستاورد:
    113
    مشکلی که همیشه مرورگر IE با عکس های با فرمت PNG داشته، مشکلی که نمی توانست پس زمینه شفاف آن را (Transparent) همانند فایل های GIF نمایش دهد. همانطور که درجریان هستید عکس های با پسوند PNG بیشترین پشتیبانی رو از کاربران Linux می گیره و نمونه های بارز آن آرم های مرورگر های Mozilla, FireFox,... هست که در نهایت کیفیت، حجم بسیار کمی دارند.
    اکثر طراحان به علت پشتیبانی نکردن مرورگر Internet Exlorer مایکروسافت ازاین نوع فرمت عکس، از قراردادن آن در وب سایت خود صرفه نظر کرده اند. (در حال حاضر تنها آخرین نسخه این مرورگر IE7 از PNG پشتیبانی می کند).

    نحوه مخفی کردن پس زمینه شفاف (Transparent) عکس های با فرمت PNG:
    HTML:

    h1 { height: 100%; width: 600px; margin: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your.png',sizingMethod='scale'); }
    head:first-child+body h1{ /* makhfi kardane pass zamineh az did ie*/ background: url(your.png); }
     


    مشکلات:
    خصیصه Filter مغایر با استاندارد جهانی W3C هست.
    بعضی مواقع یک طراحی وب سایت مجبور می شه برای حل مشکلات طراحی خود دست به حیله بزنه، هر چند مغایر با استاندارد W3C باشه.

    این نکته رو یاد آور بشم که این اولین اموزش به زبان فارسی برای حذف پس زمینه شفاف عکس های PNG در اینترنت هست (من که تا کنون نمونه ندیدم)

    رمز فایل: www.majidonline.com

    منبع: تارنمای پارسیان
     

    پیوست ها:

    • png.zip
      اندازه فایل:
      کیلوبایت 14.6
      نمایش ها:
      366
    آخرین ویرایش: ‏10 آگوست 2007
    نوشته شده توسط echessdesign در ‏10 آگوست 2007
    ali taftiyan، p30room، 3dsmax و 26 نفر دیگر از این ارسال تشکر کرده اند.
  2. shirini_forush

    shirini_forush Well-Known Member

    ارسال‌ها:
    2,051
    تشکر شده:
    1,059
    امتیاز دستاورد:
    113
    اینجا یه مساله ای هست. مثلا برای صفحه ای که تعداد زیادی png توش هست.
    قبلها یه مقاله برای این کار خونده بودم. اینجا:
    http://homepage.ntlworld.com/bobosola/pngtestfixed.htm
    اینا اومدن یه جاوا اسکریپت نوشتن که دونه دونه img ها رو چک میکنه اگر src اونا به .png ختم میشد این فیلتر رو بهشون اعمال میکنه:
    PHP:

    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       var arVersion = navigator.appVersion.split("MSIE")
       var version = parseFloat(arVersion[1])
       if ((version >= 5.5) && (document.body.filters))
       {
          for(var i=0; i<document.images.length; i++)
          {
             var img = document.images[i]
             var imgName = img.src.toUpperCase()
             if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
             {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                img.outerHTML = strNewHTML
                i = i-1
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    </script>
     
    حالا حسین جان اگر راهی میشناسید که نیاز نباشه آدرس عکس رو تو فیلتر AlphaImageLoader بنویسیم میتونیم از Selector های پیشرفته ی css 3 استفاده کنیم و کد js بالا رو با یه خط css جایگزین کنیم.
    میشناسید؟
     
    نوشته شده توسط shirini_forush در ‏11 آگوست 2007
    3dsmax، mohrd، amirds و 6 نفر دیگر از این ارسال تشکر کرده اند.
  3. mossy

    mossy Member

    ارسال‌ها:
    140
    تشکر شده:
    21
    امتیاز دستاورد:
    16
    يك سوال ساده!؟

    PNG: Portable Network Graphic
    من آخرش نفهميدم چرا اونهايي كه گرافيك كار ميكنن و يكمي هم عشق سايت داشتن دارن مشتاقانه خواهان استفاده از اين نوع فايلها هستند؟ در صورتيكه اصل وجود اين نوع فايل اصلا براي استفاده به عنوان نمايش در سايت يا پرزنت اون بعنوان عكس در صفحات نيست! و فقط بعنوان يك حمال يا نقال يا فورمت قابل حمل ميشه از اونها استفاده كرد! خاصيت حجم كم در عين كيفيت مطلوب هم به خاطر پورتابل يا قابل حمل بودن اين نوع فايلهاست نه چيز ديگه اي!
     
    نوشته شده توسط mossy در ‏12 سپتامبر 2007
  4. shirini_forush

    shirini_forush Well-Known Member

    ارسال‌ها:
    2,051
    تشکر شده:
    1,059
    امتیاز دستاورد:
    113
    الان اینایی که گفتید چه ربطی داشت؟!
    نگفتن که PNG: Portable Network Graphic And Never Will Be Used Elsewhere !!!!
     
    نوشته شده توسط shirini_forush در ‏12 سپتامبر 2007
  5. mossy

    mossy Member

    ارسال‌ها:
    140
    تشکر شده:
    21
    امتیاز دستاورد:
    16
    But some might say that!?
    Some simple conseptual manner and i'm not afraid of saying so, am not going to have a dialect here ​

    يه جك بگم شايد متوجه شديد ربطش چه بوده:D
    يه روزي يه دسته از همشهريهاي ما داشتن براي يك كوچه لوله كشي گاز ميكردن! يعني يك نفر زمين رو ميكنه و ديگري با بيل خاك رو درمياره و يكي هم كلنگ ميزده و طبيعتا يكي هم لوله ي گاز ميگذاشته و همين كارها براي پر كردن زمين!
    فرداي اون روز يكي ميبينه كه يكي از كارگرا زمين رو ميكنه و ديگري دوباره زمين رو پر ميكنه و يكي هم آسفالت ميكنه!
    ميره از يكي از كارگرا ميپرسه جريان چيه؟
    كارگره ميگه : امروز لوله كش نيومده ما كار خودمونوو ميكنيم!!

    من اصل استفاده از اين نوع فايل رو نقض نكردم! كه شما از ديد استفاده شدن يا نشدن به موضوع نگاه ميكني! و ميگه چه ربطي داشته!
    بلكه فقط يك اصلي رو بيان كردم كه بر طبق اون اصل اين نوع پروتوتايپ ايجاد شده و اخيرا هم در مايم تايپهاي مرورگرها شناخته شده!
    ديگر اينكه ديگران چه ميكنند و ما چه ميكنيم بستگي به كار هر كس و ديدي كه از ابزاري كه در اختيارش هست بستگي داره!
    من هم نگفتم با چنگال نميشه زمين رو بكنيم بلكه فقط ميگم كلنگ مال اين كار هست و چنگال بهتره براي غذا خوردن استفاده بشه و اصل چنگال براي غذا خوردن اختراع شده!
    حالا هر كسي كه چنگال داشته باشه ميتونه زمين رو بكنه و البته طبيعتا به كسي ربطي نداره.
     
    نوشته شده توسط mossy در ‏13 سپتامبر 2007
  6. Helen_Farhani

    Helen_Farhani Member

    ارسال‌ها:
    199
    تشکر شده:
    17
    امتیاز دستاورد:
    16
    در این روش هیچ راهی وجود نداره که اون نوار بالای صفحه که مربوط به security هست، حذف بشه؟
     
    نوشته شده توسط Helen_Farhani در ‏14 سپتامبر 2007
  7. shirini_forush

    shirini_forush Well-Known Member

    ارسال‌ها:
    2,051
    تشکر شده:
    1,059
    امتیاز دستاورد:
    113
    جسارتا باز هم صحبت های شما ربط خاصی نداره و بیشتر به نظر میاد به رخ کشیدن یه سری مسائل غیر قابل عرضست...

    خوبه خودتون مزیت های png رو ببینید و سایتای معتبری که از یان قابلیت ها استفاده میکنند رو همچنین.
    در ضمن اگر میخواید بحث رو ادامه بدید لطف کنید خیلی کوتاه مشکل رو بیان کنید که بدونیم سر چی صحبت کنیم و بحث دوستانمون به جنجال غیر دوستانه کشیده نشه.

    تو روش من اگر صفحتون فقط پسوند داینامیک داشته باشه مشکل حل میشه.
     
    نوشته شده توسط shirini_forush در ‏14 سپتامبر 2007
  8. maso

    maso Member

    ارسال‌ها:
    99
    تشکر شده:
    13
    امتیاز دستاورد:
    6
    من تو صفحه اصلیم
    http://masphp.com
    از png و علاوه بر ترانس پرانت ، از لایه ترانسپارانتش که کم رنگ و پر رنگ میشه استفاده کردم و بین براوزر ها هم جدا کردم که 3 نوع صفحه به دلخواه براوزر نشان داده می شود اگر از ie کمتر از 7 برید و به سورسش بنگرید راحی که استفاده کردم را می بیند

    خوب این راه به نظرم رسیده ، شاید شما بهتر از این را هم بتوانید پیدا کنید
     
    نوشته شده توسط maso در ‏15 سپتامبر 2007
  9. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    دلیل اینکه همه می خوان از png استفاده کنند اینهاست

    1- حجم کم تر نسبت به gif
    2- قابلیت پشتیبانی از کانال های آلفا

    شما میتونید با استفاده از pngیک تصویر نیمه شفاف رو در طراحی استفاده کنید و طراحی های بسیار جذابی رو ایجاد کنی در حالی که تصاویر gif تنها از کمترین حالت شفافیت پشتیبانی می کنند. در gif یا یک پیکسل باید کاملا شفاف باشه یا کاملا غیر شفاف.

    حالا این همه ترفند و این چیز ها برای اینه که مایکروسافت با ارائه اون IE بی خاصیتش از png ساپورت کرده ولی شفافیت لایه ها رو به حساب نمیره و پس زمینه شفاف تصاویر png با رنگ طوسی نمایش داده میشه. برای رفع این مشکل طراحان مجبورند از این شیوه ها استفاده کنند

    خوب فکر کنم خیلی روشنه
     
    نوشته شده توسط amirabbas_p30magazine در ‏15 سپتامبر 2007
    tanzad، yakoza، VAHID216 و یک نفر دیگر از این ارسال تشکر کرده اند.
  10. shirini_forush

    shirini_forush Well-Known Member

    ارسال‌ها:
    2,051
    تشکر شده:
    1,059
    امتیاز دستاورد:
    113
    البته تو ie7 این مشکل وجود نداره :wink:
     
    نوشته شده توسط shirini_forush در ‏15 سپتامبر 2007
  11. the-MA

    the-MA Member

    ارسال‌ها:
    142
    تشکر شده:
    112
    امتیاز دستاورد:
    16
    حجم png کمتر از gif ؟؟؟

    آقا سلام عرض شد ...
    من نمیدونم شما با چه برنامه ای کار میکنید که این حرفو میزنید ...

    والا ما به فوتو شاپ 8 کار میکنیم هر چی کار کردیم حجم پی ان جی ها زیاد تره اونم نه چند کیلو بایت بلکه چند صد کیلو بایت ...

    یه لوگوی کوچولو ساختم با پی ان جی شد حدود 100 کیلو با جی آی اف شد حدود 7 کیلو بایت !!!

    آقا بابا یاد ما هم بدین چجوری png با حجم کم بسازیم ...
    جای دوری نمیره هاااااا....
    :twisted:
     
    نوشته شده توسط the-MA در ‏9 اکتبر 2007
    ARTA_ADOBE CO از این پست تشکر کرده است.
  12. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,374
    تشکر شده:
    3,829
    امتیاز دستاورد:
    113
    درود بر شما
    سوالات خود را در رابطه با عکس، در انجمن فتوشاپ مطرح فرمایید. (از زدن اسپم خود داری کنید.)
    پاینده باشید.
     
    نوشته شده توسط echessdesign در ‏11 اکتبر 2007
    irlogo از این پست تشکر کرده است.
  13. NabiKAZ

    NabiKAZ Active Member

    ارسال‌ها:
    1,182
    تشکر شده:
    429
    امتیاز دستاورد:
    36
    سلام ،
    صحبت از PNG شد ، با اجازه اساتيد بد ندونستم کمي در اين باره صحبت کنم.
    ترجيح دادم به صورت يه مقاله در بلاگم قرار بدم. يه کپي هم اينجا ميزارم: (شرمنده اگر بي ارتباط به تاپيکه ولي به اين سمت کشيده شده...)

    در حاشيه:

    PNG-24bit به دليل خواصي که عرض شد طبيعتاً حجم بالاتري به نسبت PNG-8bit داره و PNG-8bit هم به نسبت GIF در اغلب موارد حجم کمتري داره. (درست به همين دليله که اون دوستمون the MS در بالا گفتند حجم png شون بيشتر شده. چون احتمالاً از png-24 استفاده کردند.)

    در واقع اگر خواصي مثل transparent مطرح باشه بهترين (شايدم تنها) گزينه براي وب، علارغم اينکه ممکنه حجم فايل خيلي بالا بره، استفاده از PNG-24bit است. (قابل توجه دوستاني که لزوم استفاده از اين فورمت رو متوجه نيستند)

    تشکر
    نبي
     
    آخرین ویرایش: ‏27 نوامبر 2007
    نوشته شده توسط NabiKAZ در ‏27 نوامبر 2007
    Mds، Helen_Farhani، amirds و 3 نفر دیگر از این ارسال تشکر کرده اند.
  14. mehdi.m

    mehdi.m New Member

    ارسال‌ها:
    3
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    چطوری این فیلتر به بک گراند اعمال می شه؟

    سلام و خسته نباشید. بابت این آموزش واقعاً ممنون

    فقط این سوال برام بی جواب مونده که من چطوری میتونم این فیلتر رو توی CSS به خاصیت بکگراند یک Div اعمال کنم؟؟؟

    HTML:

    #logo {
        background-image: url(logo.png); /* mikham filter be in khat emal she! */
        background-repeat: no-repeat;
        height: 100px;
        width: 160px;
    }
     

    بازم ممنون و یا علی ...
     
    نوشته شده توسط mehdi.m در ‏5 آوریل 2008
  15. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    فکر نکنم شدنی باشه. نمیشه تصاویر تو پس زمینه رو شفاف کرد.
    شما در نهایت میتونی یه تصویر رو در در پس زمینه یه div قرار بدی ولی اون خطی که مربوط به تصویر پس زمینه هست رو به شکل inline داخل کد صفحه بنویسید تا جاوا اسکریپت بتونه روش عمل کنه. مثلا اینطوری

    کد (Text):
    <div style="background-image: url(logo.png);">

    </div>
     
    نوشته شده توسط amirabbas_p30magazine در ‏5 آوریل 2008
  16. mehdi.m

    mehdi.m New Member

    ارسال‌ها:
    3
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    جادا اسکریپت نمی خوام! Css بهتره

    سلام
    ممنون از راهنماییتون، ولی فکر کنم شما متوجه منظور من نشدید.:)
    من نمی خوام از جاوا استفاده کنم. بلکه می خوام راهی که آقای echessdesign فرموودند رو بگار بگیرم.
    یعنی این

    HTML:

    h1 { height: 100%; width: 600px; margin: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='your.png',sizingMethod='scale'); }
    head:first-child+body h1{ /* makhfi kardane pass zamineh az did ie*/ background: url(your.png); }
     
     
    نوشته شده توسط mehdi.m در ‏6 آوریل 2008
  17. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    خوب اینکه توضیح داده شده. به جای h1 توی کدی که الان تو پست آخر خودتون هست اسم کلاس یا ID اون div رو بنویسید
     
    نوشته شده توسط amirabbas_p30magazine در ‏6 آوریل 2008
    mehdi.m از این پست تشکر کرده است.
  18. mohsenshahab

    mohsenshahab Active Member

    ارسال‌ها:
    743
    تشکر شده:
    175
    امتیاز دستاورد:
    43
    من این کار رو هم کردم ولی کل صفحه رو می ریزه به هم
     
    نوشته شده توسط mohsenshahab در ‏10 آوریل 2008
  19. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    طرحتون رو بذارید تا بررسی بشه. خیلی ها استفاده می کنند و مشکلی ندارند
     
    نوشته شده توسط amirabbas_p30magazine در ‏10 آوریل 2008
  20. mohsenshahab

    mohsenshahab Active Member

    ارسال‌ها:
    743
    تشکر شده:
    175
    امتیاز دستاورد:
    43
    سلام بر دوستان
    من بعد از کلی تحقیق و ور رفتن بالاخره به نتایجی رسیدم که به شما هم یاد میدم البته شاید بعضی ها بلد باشن
    این روش نیاز به کد هم نداره و فقط مربوط به فتوشاپ میشه.ببخشید که اینجا مطرح میکنم
    اول گزینه imageوبعدmodeو بعد indexedcolor
    حالا یه پنجره باز میشه که باید ok کنین
    حالا یه پنجره دیگه باز میشه تیک trancparecy رو فعال کنین
    now click ok
    حالا save for web برین و png8 رو انتخاب کنین و تمام.

    من هنوز به روشی دست پیدا نکردم که با png24 این کار رو بکنم.
     
    نوشته شده توسط mohsenshahab در ‏15 آوریل 2008

به اشتراک بگذارید