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

echessdesign

مدیر انجمن طراحی وب
مشکلی که همیشه مرورگر 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 کیلوبایت · بازدیدها: 369
آخرین ویرایش:

shirini_forush

Well-Known Member
اینجا یه مساله ای هست. مثلا برای صفحه ای که تعداد زیادی 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 جایگزین کنیم.
میشناسید؟
 

mossy

Member
يك سوال ساده!؟

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

shirini_forush

Well-Known Member
الان اینایی که گفتید چه ربطی داشت؟!
نگفتن که PNG: Portable Network Graphic And Never Will Be Used Elsewhere !!!!
 

mossy

Member
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
يه روزي يه دسته از همشهريهاي ما داشتن براي يك كوچه لوله كشي گاز ميكردن! يعني يك نفر زمين رو ميكنه و ديگري با بيل خاك رو درمياره و يكي هم كلنگ ميزده و طبيعتا يكي هم لوله ي گاز ميگذاشته و همين كارها براي پر كردن زمين!
فرداي اون روز يكي ميبينه كه يكي از كارگرا زمين رو ميكنه و ديگري دوباره زمين رو پر ميكنه و يكي هم آسفالت ميكنه!
ميره از يكي از كارگرا ميپرسه جريان چيه؟
كارگره ميگه : امروز لوله كش نيومده ما كار خودمونوو ميكنيم!!

من اصل استفاده از اين نوع فايل رو نقض نكردم! كه شما از ديد استفاده شدن يا نشدن به موضوع نگاه ميكني! و ميگه چه ربطي داشته!
بلكه فقط يك اصلي رو بيان كردم كه بر طبق اون اصل اين نوع پروتوتايپ ايجاد شده و اخيرا هم در مايم تايپهاي مرورگرها شناخته شده!
ديگر اينكه ديگران چه ميكنند و ما چه ميكنيم بستگي به كار هر كس و ديدي كه از ابزاري كه در اختيارش هست بستگي داره!
من هم نگفتم با چنگال نميشه زمين رو بكنيم بلكه فقط ميگم كلنگ مال اين كار هست و چنگال بهتره براي غذا خوردن استفاده بشه و اصل چنگال براي غذا خوردن اختراع شده!
حالا هر كسي كه چنگال داشته باشه ميتونه زمين رو بكنه و البته طبيعتا به كسي ربطي نداره.
 
در این روش هیچ راهی وجود نداره که اون نوار بالای صفحه که مربوط به security هست، حذف بشه؟
 

shirini_forush

Well-Known Member
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
يه روزي يه دسته از همشهريهاي ما داشتن براي يك كوچه لوله كشي گاز ميكردن! يعني يك نفر زمين رو ميكنه و ديگري با بيل خاك رو درمياره و يكي هم كلنگ ميزده و طبيعتا يكي هم لوله ي گاز ميگذاشته و همين كارها براي پر كردن زمين!
فرداي اون روز يكي ميبينه كه يكي از كارگرا زمين رو ميكنه و ديگري دوباره زمين رو پر ميكنه و يكي هم آسفالت ميكنه!
ميره از يكي از كارگرا ميپرسه جريان چيه؟
كارگره ميگه : امروز لوله كش نيومده ما كار خودمونوو ميكنيم!!

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

جسارتا باز هم صحبت های شما ربط خاصی نداره و بیشتر به نظر میاد به رخ کشیدن یه سری مسائل غیر قابل عرضست...

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

در این روش هیچ راهی وجود نداره که اون نوار بالای صفحه که مربوط به security هست، حذف بشه؟
تو روش من اگر صفحتون فقط پسوند داینامیک داشته باشه مشکل حل میشه.
 

maso

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

خوب این راه به نظرم رسیده ، شاید شما بهتر از این را هم بتوانید پیدا کنید
 
من اصل استفاده از اين نوع فايل رو نقض نكردم! كه شما از ديد استفاده شدن يا نشدن به موضوع نگاه ميكني! و ميگه چه ربطي داشته!
بلكه فقط يك اصلي رو بيان كردم كه بر طبق اون اصل اين نوع پروتوتايپ ايجاد شده و اخيرا هم در مايم تايپهاي مرورگرها شناخته شده!
ديگر اينكه ديگران چه ميكنند و ما چه ميكنيم بستگي به كار هر كس و ديدي كه از ابزاري كه در اختيارش هست بستگي داره!
من هم نگفتم با چنگال نميشه زمين رو بكنيم بلكه فقط ميگم كلنگ مال اين كار هست و چنگال بهتره براي غذا خوردن استفاده بشه و اصل چنگال براي غذا خوردن اختراع شده!
حالا هر كسي كه چنگال داشته باشه ميتونه زمين رو بكنه و البته طبيعتا به كسي ربطي نداره.

دلیل اینکه همه می خوان از png استفاده کنند اینهاست

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

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

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

خوب فکر کنم خیلی روشنه
 

the-MA

Member
حجم png کمتر از gif ؟؟؟

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

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

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

آقا بابا یاد ما هم بدین چجوری png با حجم کم بسازیم ...
جای دوری نمیره هاااااا....
:twisted:
 

NabiKAZ

Well-Known Member
سلام ،
صحبت از PNG شد ، با اجازه اساتيد بد ندونستم کمي در اين باره صحبت کنم.
ترجيح دادم به صورت يه مقاله در بلاگم قرار بدم. يه کپي هم اينجا ميزارم: (شرمنده اگر بي ارتباط به تاپيکه ولي به اين سمت کشيده شده...)

نبي گفت:
png_the_king.gif

خيلي ها رو ديده بودم که به عنوان يک طراح وب سايت، جايگاه استفاده از فورمت هاي مختلف تصويري را در صفحات وب طراحي شده نميدونستند و نميدونستند که کجا از چه فورمتي بايد استفاده کرد. هميشه ميخواستم در اين باره بنويسم اما فرصت نميشد، تا اينکه در [اينجا] به مقاله اي با عنوان "مخفي کردن پس زمينه Transparent عکس هاي PNG در IE" از دوست خوبم آقا حسين برخورد کردم، و برخي دوستان موضع گرفتند که فورمت png اونقدر ارزش نداره که بخاطر اون دست به هک هاي IE بزنيم. اين موضوع باعث شد که کمي در اين باره صحبت کنيم...

به نظر من قابليت بارز اين فورمت يعني PNG که مخصوصاً طراحان وب رو به سمت خودش جذب کرده ، شيوه ذخيره رنگها به صورت palette است. (دقيقاً مشابه فايلهاي GIF با اين تفاوت که طيف بيشتري از رنگها رو دربر ميگيره)
فايلهاي PNG بصورت PNG-8bit و PNG-24bit مي باشن. فايلهاي PNG-8bit از پالت 256 رنگي استفاده ميکنند و قابليت transparent رو ندارند(درست مثل فايلهاي GIF) بر خلاف فورمت PNG-24bit که پالت اون تا 16.7 ميليون رنگ رو در خودش جاي ميده و همين دامنه وسيع باعث ساپورت اون از تصاوير transparent شده.
توجه داشته باشيد که در اينجا transparent به مفهوم شفاف بودن بخشي از تصوير به طوري که زمينه و پشت تصوير نمايان باشد بکار رفته است(حالت شيشه اي) و به معني حذف بخشي از تصوير و نمايان شدن زمينه بکار نرفته.
در واقع به عقيده من و بر حسب تجربه، هيچ تفاوتي به لحاظ کيفي بين GIF و PNG-8bit وجود نداره يا حداقل من نديدم.
اما وقتي صحبت از PNG-24bit ميشه، اونوقت قضيه خيلي متفاوت ميشه. فکر نميکنم جايگزين ديگه اي براي اين فورمت روي وب وجود داشته باشه.
PNG-24bit به دليل خواصي که عرض شد طبيعتاً حجم بالاتري به نسبت PNG-8bit داره و PNG-8bit هم به نسبت GIF در اغلب موارد حجم کمتري داره.
در واقع اگر خواصي مثل transparent مطرح باشه بهترين (شايدم تنها) گزينه براي وب، علارغم اينکه ممکنه حجم فايل خيلي بالا بره، استفاده از PNG-24bit است.

اجازه بديد کمي بريم به حاشيه...
وقتي از يه ديد ديگه به قضيه نگاه کنيم. براي وب غالباً دو فورمت JPG و GIF متداول تر هستند و شايد همين دو فورمت نياز طراحان وب رو برآورد کنند. اما ميدونيد که اين دو فورمت کاملاً متفاوت هستند، JPG بيشتر براي مناظر ، طبيعت و تصاويري که با جابجايي پيکسل ها تغيير محسوسي که با چشم قابل رويت باشه در تصوير ظاهر نميشه استفاده ميشه. بر خلاف تصاوير GIF که به دليل ماهيت پالتي بودن و طيف رنگي محدود و ثابت و مشخص، به هيچ عنوان پيکسل ها جابجا نميشه ! و تنها ممکنه رنگ پيکسل ها عوض بشه. در نتيجه در مورد تصاويري که در اونها از متون، مخصوصاً متون ريز استفاده شده (درست مثل screen shot هايي که از صفحات ويندوز ميگيريم) شايد بهترين فورمت GIF باشه. چون خوانايي نوشته ها با جابجايي پيکسل ها از بين نميره و درواقع جهت کاهش کيفيت با کوچکتر کردن پالت رنگ به نوعي رنگ پيکسل هاي تصوير تعويض ميشود؛ و بدترين فورمت براي اينگونه تصاوير، فورمت JPG باشه. چون براي کاهش حجم ناچاراً نظم برخي پيکسل ها بايد بهم بخوره که موجب ناخوانايي نوشته هاي درون تصوير ميشه! وقتي صحبت از تصاوير بر روي يک وب سايت ميشه، از اونجايي که خوانايي متون(شامل خطوط و ... هم ميشه) از ديد يک کاربر عادي بسيار مهم است و نبايد چشم اذيت شود، همچنين بايستي تصوير بالاترين کيفيت ممکن را داشته باشد پس اينجاست که فورمت JPG ذاتاً نميتونه فورمت خوبي باشه، در اين جور مواقع ناچاراً از GIF استفاده ميشه.
testpic_jpg_min_quality.jpg

با کاهش کيفيت تصوير JPG نوشته هاي درون تصوير به سختي خوانده ميشوند.

testpic_gif_8colors.gif

حتي با به حدقل رساندن کيفيت تصوير GIF نوشته هاي درون تصوير کاملاً خوانا مي باشند.

testpic_all_format.png

مقايسه فورمت هاي تصويري رايج وب

پاراگراف اخير در مورد فورمت JPG و GIF بود، اما چه ربطي به بحث ما و PNG داشت؟! همه اينها رو گفتم که به اين نقطه برسم که لزوم استفاده از فورمت GIF در جاهاي خاص ثابت بشه (که در پاراگراف اخير ثابت شد) اما گفتيم که فورمت GIF تنها قابليت استفاده از 256 رنگ را دارد. پس اگر تصوير ما شامل رنگهاي بيشتري بود تکليف چيست؟! اينجاست که ويرايشگرهاي تصوير با معادل سازي رنگها، سعي ميکنند رنگهايي که به هم نزديک هستند را در قالب يک رنگ در پالت ذخيره کنند. که طبعاً اينکار باعث ميشود که توازن رنگ برهم بخورد و تصوير رنگ واقعي خود را از دست بدهد. (درست به همين سبب بود که عرض کردم براي کاهش کيفيت، رنگ پيکسل ها عوض ميشود ولي پيکسلها جابجا نميشوند.) خب راه حل چيست ؟! تصوير رنگ واقعي خود را از دست داده است، پس ميشه به اين نتيجه رسيد که 256 رنگ براي هر تصوير کافي نيست و بايد از فورمت ديگري که مشابه فورمت GIF بر مبناي palette باشد و پيکسل ها جابجا نشود استفاده و از همه مهمتر palette بيشتر از 256 رنگ در اختيار ما قرار دهد استفاده کنيم. اينجاست که فورمت PNG وارد گود ميشود که علاوه بر اينکه تمام خواص ذکر شده را دارد و همچنين همونطور که عرض شد پالتي تا 16.7 ميليون رنگ را در اختيار ما ميگذارد، بلکه امکان transparent هم در اختيار ما قرار ميدهد و درست اينجاست که شايد با من هم عقيده ميشويد که احساس ميکنيم فورمت PNG پادشاه فورمت هاي تصويري براي خلق صفحات وب است !!!
اين نکته مهم را در نظر داشته باشيد که خاصيت transparent تصاوير با فورمت PNG-24bit يا همان شيشه اي بودن آن متاسفانه در Internet Explorer 6 پشتيباني نميشود! البته هک هايي براي اين منظور وجود دارد که در [اين مقاله] و [اين مقاله] ميتوانيد مطالعه کنيد.
کليه مطالب بالا برداشت ها و تجربيات شخصي اينجانب بود و از هيچ منبعي اقتباس نشده است. انشالله که اشکالي در مطالب وجود نداشته باشد. در غير اين صورت در کامنت هاي همينجا بفرمائيد تا تصحيح گردد.

منبع: weblog.nabi.ir
در حاشيه:

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

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

تشکر
نبي
 
آخرین ویرایش:

mehdi.m

New Member
چطوری این فیلتر به بک گراند اعمال می شه؟

echessdesign; گفت:
نحوه مخفی کردن پس زمینه شفاف (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); }

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

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

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


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

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

</div>
 

mehdi.m

New Member
جادا اسکریپت نمی خوام! 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); }
 
خوب اینکه توضیح داده شده. به جای h1 توی کدی که الان تو پست آخر خودتون هست اسم کلاس یا ID اون div رو بنویسید
 

mohsenshahab

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

من هنوز به روشی دست پیدا نکردم که با png24 این کار رو بکنم.
 

جدیدترین ارسال ها

بالا