هنگامی که روی طراحی وب سایت کار می کنید، اغلب باید با این واقعیت دست و پنجه نرم کنید که تصویر یافت شده، که به طور ایده آل با سایت شما مطابقت دارد، پس زمینه متفاوتی دارد که می خواهید حذف کنید.
و بنابراین، ما تصویر خود را در فتوشاپ باز می کنیم.
1.
اولین کاری که باید انجام دهید این است که یک فضای کاری برای تصویر با پس زمینه شفاف ایجاد کنید. برای این:
- در پنجره لایه ها، روی لایه ما دوبار کلیک کنید (با قفل)
- در پنجره باز شده روی OK کلیک کنید.
قفل باید ناپدید شود
اگر پس زمینه ساده است:
ابزار را انتخاب کنید " عصای جادویی” یک ابزار بسیار منعطف برای انتخاب منطقه مورد نظر است. وظیفه ما انتخاب کل پس زمینه به جز تصویر است. برای انجام این کار، تنظیمات چوب جادویی (پارامتر تحمل) تا به نتیجه دلخواه برسیم. همچنین از کلید Shift برای انتخاب ناحیه ای علاوه بر منطقه ای که قبلا انتخاب شده است استفاده می کنیم. Del را فشار دهید و ناحیه انتخاب شده حذف می شود.
اگر پس زمینه چند رنگ است:
ما از ابزار استفاده می کنیم انتخاب سریع". در اینجا وظیفه ما برجسته کردن پس زمینه نیست، بلکه خود شی است که باید باقی بماند. فشار دهید تا ناحیه مورد نظر برجسته شود. اگر مقدار اضافی برجسته شده است، Alt و منهای ناحیه را نگه دارید. با کلید Q می توانید نتیجه را مشاهده کنید.
وقتی انتخاب آماده شد، آن را با Ctrl+C کپی کنید. یک سند جدید با پس زمینه شفاف ایجاد کنید (Ctrl + N) و شی را در آنجا قرار دهید Ctrl + V.
3 . اگر چیزی اضافی در تصویر باقی مانده است، از ابزار استفاده کنید " پاک کن"، فقط پس زمینه اضافی را بازنویسی کنید.
4 . تصویر را برای وب ذخیره کنید (Alt + Shift + Ctrl + S) فرمت GIF یا PNG را انتخاب کنید (در موارد دیگر، پس‌زمینه شفاف ما سفید می‌شود).
ویدئوی مفید در مورد موضوع:
گاهی ممکن است کاربر یک تصویر PNG با پس زمینه شفاف بخواهد. با این حال، فایل ضروری همیشه با پارامترهای مورد نیاز مطابقت ندارد. در این مورد، باید خودتان آن را تغییر دهید یا یک مورد جدید را انتخاب کنید. در مورد ایجاد یک پس زمینه شفاف، خدمات آنلاین ویژه به انجام این کار کمک می کند.
روش ایجاد یک پس‌زمینه شفاف به معنای حذف تمام اشیاء غیر ضروری است، در حالی که تنها مورد ضروری باقی می‌ماند و اثر مورد نظر به جای عناصر قدیمی ظاهر می‌شود. پیشنهاد می کنیم با منابع اینترنتی که به شما امکان اجرای چنین فرآیندی را می دهد آشنا شوید.
ویرایشگر گرافیکی LunaPic به صورت آنلاین کار می کند و طیف گسترده ای از ابزارها و عملکردها از جمله جایگزینی پس زمینه را در اختیار کاربر قرار می دهد. هدف به شرح زیر محقق می شود:
این کار با سرویس LunaPic کامل می شود. با تشکر از دستورالعمل های بالا، می توانید به راحتی پس زمینه را شفاف کنید. تنها اشکال سرویس این است که فقط با نقاشی هایی که پس زمینه عمدتا با یک رنگ پر شده است به درستی کار می کند.
بیایید سایت PhotoScissors را درک کنیم. در اینجا چنین مشکلی وجود ندارد که پردازش خوب فقط با تصاویر خاصی به دست می آید، زیرا شما خودتان منطقه ای را که بریده شده است تنظیم می کنید. پردازش به شرح زیر انجام می شود:
این کار با منبع آنلاین PhotoScissors کامل می شود. همانطور که می بینید، هیچ چیز پیچیده ای در مدیریت آن وجود ندارد، حتی یک کاربر بی تجربه که دانش و مهارت اضافی ندارد، کار را درک می کند.
اخیراً وب سایت Remove.bg روی لبان بسیاری قرار گرفته است. واقعیت این است که توسعه دهندگان یک الگوریتم منحصر به فرد ارائه می دهند که به طور خودکار پس زمینه را قطع می کند و تنها یک شخص را در تصویر باقی می گذارد. متأسفانه، اینجاست که قابلیت های وب سرویس به پایان می رسد، اما در پردازش چنین عکس هایی بسیار عالی عمل می کند. بیایید نگاهی دقیق تر به این فرآیند بیندازیم:
اینجاست که مقاله ما به نتیجه منطقی خود می رسد. امروز سعی کردیم در مورد محبوب‌ترین سرویس‌های آنلاین به شما بگوییم که به شما امکان می‌دهند پس‌زمینه یک تصویر را تنها با چند کلیک شفاف کنید. امیدواریم حداقل یک سایت را دوست داشته باشید.
نکته اصلی این است که یک تصویر را در رایانه یا تلفن خود مشخص کنید و سپس روی دکمه OK در پایین این صفحه کلیک کنید. به طور پیش فرض، پس زمینه ساده تصویر با یک پس زمینه شفاف جایگزین می شود. رنگ پس زمینه تصویر اصلی به صورت خودکار تعیین می شود، فقط باید در تنظیمات مشخص کنید که با چه رنگی جایگزین شود. پارامتر اصلی که بر کیفیت تعویض تأثیر می گذارد «شدت تعویض» است و برای هر تصویر می تواند متفاوت باشد.
نمونه ای از عکس رز صورتی بدون تغییر و پس از جایگزینی پس زمینه جامد با شفاف، سفید و سبز:
مثال اولبا گل رز روی زمینه شفاف با تنظیمات زیر ساخته شده است:
1) شدت تعویض - 38؛
2) صاف کردن لبه ها - 5؛
3) پس زمینه جامد را با یک پس زمینه شفاف جایگزین کنید.
4) کشت (<0) или Добавление (>0) در امتداد لبه ها - "-70"؛
5) Invert - غیرفعال (بررسی نشده است).
برای ایجاد مثال دوم، با پس‌زمینه سفید، از تنظیمات مشابه در مثال اول استفاده شد، به جز پارامتر: "Replace plain background with" - white. AT مثال سوم، با پس زمینه سبز، تنظیمات نیز مانند مثال اول استفاده می شود، به جز پارامتر: "color in hex format" - #245a2d.
تصویر اصلی به هیچ وجه تغییر نکرده است. تصویر پردازش شده دیگری با پس زمینه شفاف یا پس زمینه ای که مشخص کرده اید به شما داده می شود.
برخی از کاربران ممکن است نیاز به ایجاد پس‌زمینه شفاف روی برخی عکس‌ها داشته باشند. این ممکن است به دلیل ملاحظات زیبایی شناختی، نیاز به ایجاد واترمارک برای اهداف تجاری و دلایل دیگر باشد - واقعیت این است که کاربر نمی داند چگونه و با چه چیزی می تواند این کار را انجام دهد. در این مقاله سعی خواهم کرد به چنین کاربرانی کمک کنم و به شما بگویم که چگونه یک پس زمینه شفاف آنلاین ایجاد کنید، چه خدماتی برای این کار وجود دارد و چگونه از آنها استفاده کنید.
چندین سرویس در شبکه وجود دارد که به شما امکان می دهد پس زمینه یک عکس را به صورت آنلاین به صورت رایگان حذف کنید. در عین حال، همه آنها ابزارهای نسبتاً ساده ای دارند که به شما امکان می دهند پس زمینه عکس ها را تقریباً با چند کلیک حذف کنید. در زیر این خدمات را با شرح مفصلی از عملکرد آنها لیست می کنم.
اگر شما نیز مانند من تمایل دارید، پس من عجله دارم که شما را راضی کنم، اکثر آنها را آزمایش کردم و لیستی از بهترین ها را (در لینک بالا) جمع آوری کردم.
اولین منبعی که به شما امکان می دهد یک پس زمینه شفاف به صورت آنلاین ایجاد کنید، Online-Photoshop است. کار با آن بسیار ساده است، به شما این امکان را می دهد که در عرض چند دقیقه یک شی با پس زمینه شفاف روی عکس خود دریافت کنید.
حالا فلش سمت راست را فشار می دهیم و به نتیجه نگاه می کنیم. اگر همه چیز خوب است، روی دکمه "دانلود" در بالا کلیک کنید و نتیجه را در رایانه شخصی خود ذخیره کنید.
ابزار دیگری برای ایجاد یک پس‌زمینه شفاف آنلاین، ویرایشگر آنلاین Pixlr مانند Photoshop است. دارای تعداد قابل توجهی از ویژگی ها است، اما ما در درجه اول علاقه مند به ایجاد یک پس زمینه شفاف آنلاین هستیم.
این سرویس یک گزینه تقریباً کاملاً خودکار است که به شما امکان می دهد پس زمینه را به صورت آنلاین شفاف کنید.
برای کار با سرویس، به آن بروید، روی دکمه "مرور" کلیک کنید، مطمئن شوید که گزینه "Replace plain background with" روی "Transparent" تنظیم شده است و روی دکمه بزرگ "OK" در پایین کلیک کنید.
پس از پردازش، می توانید نتیجه را مشاهده کنید یا با استفاده از لینک های مناسب آن را در رایانه خود دانلود کنید.
توجه داشته باشم که به دلیل اتوماسیون، کیفیت پردازش حاصل معمولاً بدتر از Online-Photoshop و Pixlr است که در بالا ذکر شده است.
سرویس دیگری که به شما امکان می دهد به صورت آنلاین یک پس زمینه شفاف روی عکس بسازید.
برای کار با این سرویس، باید عکسی تهیه کنید، که برای آن باید روی یک ناحیه بالقوه شفاف با رنگی که روی خود تصویر نیست (مثلاً آبی، همانطور که در مثال زیر نشان داده شده است) رنگ کنید. همچنین مهم است که عکس با فرمت png یا gif باشد.
این سرویس برای ایجاد پس‌زمینه شفاف از نظر عملکرد مشابه سرویس قبلی است و نیاز به پس‌زمینه یک رنگ دارد. این رنگ را به یک پس زمینه شفاف تبدیل می کند و تصویر مورد نیاز کاربر را به دست می آورد.
در مقایسه با سرویس Watermark.Algid.Net، سرویس LunaPic بیشتر شبیه یک ویرایشگر عکس تمام عیار است و به شما امکان می دهد با استفاده از ابزارهای تعبیه شده در این سرویس، پس زمینه را با یک رنگ رنگ کنید.
در بالا، من چندین سرویس راحت و آسان برای استفاده را فهرست کرده ام که به شما امکان می دهد یک پس زمینه شفاف به صورت آنلاین ایجاد کنید. به نظر من مؤثرترین آنها خدمات Online-Photoshop و Pixlr هستند که نتایج پردازش آنها در سطح خوبی است و ویژگی های اختیاری اصلاً پیچیده نیست. اگر نیاز به ایجاد پس‌زمینه شفاف برای عکس دارید، توصیه می‌کنم از قابلیت‌های این ابزارها استفاده کنید، آنها به شما این امکان را می‌دهند که به راحتی و به سرعت یک پس‌زمینه شفاف به‌صورت آنلاین ایجاد کنید.
علاوه بر این، PNG به عنوان یک فرمت رایگان، مزایای عملی مختلفی را نسبت به GIF به طراح وب ارائه می دهد:
لازم به ذکر است که PNG مانند GIF اجازه انیمیشن را نمی دهد. اما یک استاندارد گرافیک شبکه چندتایی (MNG) وجود دارد که این امکان را می دهد، اما به طور گسترده توسط مرورگرهای وب و ویرایشگرهای تصویر پشتیبانی نمی شود.
احتمالاً از خود می‌پرسید که چرا PNG به اندازه‌ای که تبلیغ می‌شود، به‌اندازه‌ای در وب مورد استفاده قرار نمی‌گیرد. پاسخ، در بیشتر موارد، یک تصور غلط در مورد فرمت و پشتیبانی مرورگر آن است.
از آنجایی که اینترنت اکسپلورر 6 و نسخه های قبلی از طیف کاملی از قابلیت های PNG (از جمله شفافیت کانال آلفا) پشتیبانی نمی کند، مردم باید باور کنند (البته درست نیست) که اینترنت اکسپلورر به هیچ وجه از PNG پشتیبانی نمی کند یا حداقل از شفافیت پشتیبانی نمی کند. در واقع، اینترنت اکسپلورر 5 و 6 به اندازه کافی از مشخصات PNG پشتیبانی می کنند تا از نظر عملکردی معادل (یا بیشتر) با تصاویر GIF غیر متحرک باشد. همه مرورگرهای ذکر شده دیگر، از جمله فایرفاکس، نت اسکیپ 6 و بالاتر، موزیلا، اپرا 6 و بالاتر، سافاری و کامینو به طور کامل از شفافیت PNG پشتیبانی می کنند.
جدای از این تصور غلط در مورد پشتیبانی مرورگر، انیمیشن GIF جاسازی شده دلیل اصلی موفقیت آن بود (و همچنان می باشد). اگرچه، در طول سال‌ها، استفاده از GIF در مقایسه با سایر فناوری‌ها (مثلاً فلش)، که برای انیمیشن مناسب‌تر می‌شوند، محبوبیت کمتری پیدا کرده است.
شفافیت یکی از ویژگی‌های کلیدی GIF و PNG است و اغلب دلیلی است که طراح وب انتخاب می‌کند از کدام قالب استفاده کند. اگرچه PNG از شفافیت جامع تری پشتیبانی می کند، طراحان وب اغلب نیاز به ایجاد نسخه های GIF از تصاویر متناسب با مرورگرهای قدیمی دارند. استفاده از CSS با ارسال تصاویر GIF برای مرورگرهای قدیمی و PNG های با کیفیت بالا به مرورگرهایی که آنها را درک می کنند، امکان پذیر است (و تا حدودی بی اهمیت). اما این کار برای یک طراح وب مضاعف است و در نتیجه، مردم با کمترین مقاومت پیش می روند و به استفاده از تصاویر GIF ادامه می دهند.
بنابراین، ما چند دلیل را بررسی کردیم که چرا GIF هنوز بسیار محبوب است، اما بیشتر آنها بر اساس درک نادرست مفاهیم یا استفاده از یک گردش کار آشنا هستند. با داشتن برخی از دانش کلیدی PNG و نحوه استفاده مطمئن از آن در مرورگرها، شما در موقعیتی هستید که می توانید از تمام مزایای آن استفاده کنید.
JPEG یکی دیگر از فرمت های وب است که در همه جا حاضر است و در بیشتر موارد، مانند عکس ها (یا موارد مشابه)، حتی بهتر از PNG یا GIF است. PNG برای رقابت با JPEG در نظر گرفته نشده است. فشرده سازی JPEG باعث می شود فایل ها در هنگام کار با عکس ها بسیار کوچکتر از PNG باشند. از سوی دیگر، PNG زمانی که متن، خطوط هنری، آرم، رنگ‌های "یکپارچه" و غیره در داخل تصاویر وجود دارد، فایل‌های کوچک‌تری تولید می‌کند.
حال بیایید نحوه استفاده از PNG در طراحی وب را بررسی کنیم. من تمام فایل ها را برای هر نمونه در یک پوشه جداگانه در دسترس دوستان ED جمع آوری کرده ام.
در چند سال گذشته، یک گرادیان - یک انتقال صاف بین دو یا چند رنگ - به بهترین دوست یک طراح وب تبدیل شده است. به خصوص پرهای شیب ظریف و ظریفی هستند که بدون مشخص بودن، حس عمق و بافت را ایجاد می کنند.
گاهی اوقات یک GIF بهترین انتخاب برای یک گرادیان است. اگر گرادیان یک انتقال ساده دو رنگ باشد، GIF بدون نقص در آن کار می کند. با این حال، محدودیت GIF به تنها 256 رنگ اغلب باعث ایجاد یک "باند" قابل توجه و آشفته در میان انتقال های گرادیان پیچیده تر می شود. از سوی دیگر، JPEG می‌تواند شیب‌های بسیار منظمی تولید کند، اما اغلب به قیمت اندازه فایل بزرگتر. و در حالی که گرادیان های JPEG به طور کلی به اندازه کافی خوب هستند، به یاد داشته باشید که JPEG از فشرده سازی با اتلاف استفاده می کند، به این معنی که تصویر حاصل هرگز با کیفیت تصویر غیر فشرده مطابقت نخواهد داشت.
سبک شیب پس‌زمینه معمولی مورد بحث برای دکمه‌ها، جعبه‌ها یا هر جای دیگری استفاده می‌شود. ممکن است شبیه شکل 5-1 باشد. در جهت عقربه های ساعت، از سمت چپ بالا، تصویر اصلی (غیر فشرده)، نسخه GIF، نسخه PNG و JPEG را می بینیم. می بینید که PNG کوچکترین اندازه (515 بایت) را در نتیجه دارد. این تصویر چهار برابر کوچکتر از تصویر GIF است. JPEG کمی بزرگتر از PNG با حجم 637 بایت است و همچنین به دلیل فشرده سازی با اتلاف از کیفیت پایین تری برخوردار است (اگرچه توانایی چشم انسان برای تعیین تفاوت کیفیت در این مثال ساده مشکوک است).
شکل 5-1
پنل فتوشاپ - ذخیره برای وب،
نمایش تفاوت اندازه فایل برای یک تصویر در فرمت های مختلف
گاهی اوقات لازم است تصویری ایجاد شود که روی زیرلایه های مختلف یکسان عمل کند. برخی از نمونه‌های رایج، لوگوها و نمادها هستند. این موقعیت ها به طور سنتی تحت تسلط GIF ها بوده اند، اما دلایل متعددی وجود دارد که PNG ممکن است در این شرایط انتخاب بهتری باشد. PNG تمایل دارد در اندازه فایل برای لوگوها یا برخی دیگر از "هنرهای" ساده برنده شود. علاوه بر این، شفافیت ذاتی PNG ایجاد فایل‌های منفرد را که در بالای هر پس‌زمینه کار می‌کنند، آسان می‌کند. PNG شفافیت باینری مانند GIF را ارائه می دهد، اما گزینه بسیار مطلوب تری را با یک کانال آلفا ارائه می دهد، که در آن پیکسل ها می توانند به جای روشن یا خاموش بودن تا حدی شفاف باشند. استفاده از دومی اندازه فایل را افزایش می دهد، گاهی اوقات حتی بیشتر از یک GIF با شفافیت باینری، اما اجازه می دهد تا لبه های تصویر شما صاف شود و قرار دادن آن روی پس زمینه زیباتر می شود.
با این حال، من مفهوم آنها را با استفاده از یک تصویر سفید با نمادهای استنسیل بازسازی کردم. آنها از یک علامت سفید روی یک پس زمینه شفاف استفاده کردند که معمولاً می تواند کاملاً مؤثر باشد. در این مورد، پس زمینه شما رنگ cssبه جای خود نماد در یک ناحیه مربع یا مستطیل در اطراف نماد ظاهر می شود.
هم Dan و هم PJ از GIF شفاف به جای PNG استفاده کردند. این به طور کامل نیازهای آنها را پوشش می داد و آنها مجبور بودند تصاویر پیکسلی برای سبک آیکون ها ایجاد کنند. با PNG، می‌توانید تکنیک مشابهی را دریافت کنید، اما با مزیت افزوده شده ضد aliasing و شفافیت جزئی برای استفاده در نمادهای دقیق‌تر.
می دانم به چه فکر می کنید: همه آن شفافیت PNG خوب به نظر می رسد، اما آیا عملی است؟
خبر خوب این است که همه مرورگرهای مدرن به طور کامل از تصاویر PNG پشتیبانی می کنند، از جمله شفافیت کانال آلفا، که مزایای آن را در مثال ها نشان داده ام. سافاری (همه نسخه ها)، فایرفاکس (همه نسخه ها)، اپرا (نسخه های 6 به بالا)، نت اسکیپ (نسخه های 6 به بالا)، و موزیلا (همه نسخه ها) هر کاری را که از آنها می خواهم با صدای بلند انجام می دهند. اما خبر بد، مرورگری است که من هنوز به آن اشاره نکرده‌ام که اکثر کاربران شما دارند: Internet Explorer.
Internet Explorer 6 و پایین تر از شفافیت کانال آلفا که در قالب PNG تعبیه شده است پشتیبانی نمی کند. از آنجایی که انتخاب مرورگر (یا عدم انتخاب) برای بسیاری از وب گردی ها انجام شده است، این حفره خالی طراحان وب را از PNG دور نگه داشته است. اما، با انتشار اینترنت اکسپلورر 7، ما از شفافیت آلفا PNG در تمام مرورگرهای اصلی پشتیبانی کامل کردیم. در مرحله بعد، آیا راه هایی برای کار با شفافیت آلفا PNG در اینترنت اکسپلورر 6 و پایین تر وجود دارد؟ بنابراین، اگر بخواهید از این افکت استفاده کنید، هیچ چیز مانع شما نخواهد شد. اینترنت اکسپلورر 6 و نسخه های قبلی نیاز به توجه بیشتری دارند، اما قطعا امکان پذیر است.
اینترنت اکسپلورر دارای فیلترهای بومی مختلفی است. آنها در CSS استفاده می شوند، اما بخشی از مشخصات رسمی CSS نیستند. به عبارت دیگر، آنها در وب استاندارد نیستند. متأسفانه Internet Explorer 6 و نسخه های پایین تر از فرمت PNG (که توسط W3C توصیه می شود) به طور کامل پشتیبانی نمی کند، مایکروسافت فیلتری دارد که این نقص را برطرف می کند: AlphaImageLoader.
طبق بخشی از وب سایت رسمی مایکروسافت، AlphaImageLoader "یک تصویر را در محدوده یک شی و بین پس زمینه شی و محتوای آن نمایش می دهد." به عبارت دیگر، AlphaImageLoader یک تصویر PNG را با شفافیت کامل بارگذاری می کند، اما آن را به عنوان لایه خود بارگذاری می کند، که در زیر آن محتوای شی ای که روی آن اعمال می شود، قرار دارد. تصاویر PNG که از این طریق بارگذاری می‌شوند، بیشتر شبیه تصاویر پس‌زمینه هستند تا تصاویر پیش‌زمینه (اگرچه در واقع در بالای پس‌زمینه شیء می‌نشینند).
به طور کلی، شما می توانید به سادگی AlphaImageLoader را در CSS روی عناصر img اعمال کنید و از نتیجه لذت ببرید. تصویر ابتدا بارگذاری می‌شود، شفافیت باقی می‌ماند، اما سپس تصویر دوباره - به عنوان محتوای جلوی شی - با نواحی مات بارگذاری می‌شود (در نتیجه نسخه شفاف شما "سایه" می‌شود).
شما نمی توانید از یک PNG شفاف به عنوان پس زمینه استفاده کنید تصویر cssبرای یک عنصر (X)HTML (مثلاً برای
بیایید به یکی از نمونه های قبلی برگردیم و سعی کنیم آن را به درستی در اینترنت اکسپلورر بارگذاری کنیم. کانال 49، ایستگاه تلویزیونی در توپکا را به خاطر دارید؟ مطمئنم بله. شکل 5-21 نشان می دهد که سایت در اینترنت اکسپلورر 6 چگونه به نظر می رسد.
شکل 5-21
عنوان 49abcnews.com در اینترنت اکسپلورر 6 برای ویندوز، با شفافیت PNG دست نخورده ارائه شده است.
به نظر می رسد HTML برای بالا مربوط به آب و هوا، قبلاً حدس زده باشید:
در حال حاضر در توپکا، KS:
82 درجه
دریافت پیش بینی و بیشتر...
شما یک تصویر را می بینید، و قطعا PNG است، حتی اینترنت اکسپلورر آن را بدون نقص بارگذاری می کند. عنصر مخفی این جاوا اسکریپت است. در واقع، من از کمی اسکریپت DOM برای حذف عنصر img و جایگزینی آن با یک عنصر div استفاده کردم که - حدس زدید - از AlphaImageLoader استفاده می کند. جاوا اسکریپت در داخل نظرات شرطی توضیح داده شده است، یک اصطلاح مفید اما کاملا غیر استاندارد از مایکروسافت که در اینترنت اکسپلورر تعبیه شده است. نظرات مشروط به شما امکان می دهد فقط برای یک نسخه شناخته شده اینترنت اکسپلورر از کد استفاده کنید. کد توسط همه مرورگرهای دیگر نادیده گرفته می شود، بنابراین به هیچ وجه بر آنها تأثیر نمی گذارد. در عنصر
وب سایت www.49abcnews.com را خواهید یافت:
با تشکر از خط اول، اگر lte IE6 باشد، این اسکریپت تنها در صورتی در سند ارائه شده گنجانده می شود که در نسخه اینترنت اکسپلورر کمتر یا مساوی (مشخص شده با lte) 6 نشان داده شود. همه مرورگرهای دیگر، از جمله اینترنت تازه وارد اکسپلورر 7، این را کاملا نادیده می گیرد.
بنابراین در فایل جاوا اسکریپت fixWeatherPng.js چیست؟ بیا یک نگاهی بیندازیم:
Window.attachEvent("onload"، fixWeatherPng); تابع fixWeatherPng() ( var img = document.getElementById ("weatherImage")؛ var src = img.src؛ img.style.visibility = "مخفی"؛ var div = document.createElement ("DIV")؛ div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale")"; // برخی از استایل های CSS مخصوص 49abcnews.com برای اختصار حذف شده است. img.replaceNode(div); )
بیایید مرحله به مرحله آنچه را که فیلمنامه انجام می دهد تجزیه و تحلیل کنیم. ابتدا به مرورگر می گوییم که می خواهیم تابع fixWeatherPng را هنگام بارگیری صفحه اجرا کنیم. بقیه اسکریپت خود تابع است.
برای شروع، ابتدا تصویری را که با آن کار خواهیم کرد با ویژگی id آن جستجو می کنیم و آن را در متغیر img ذخیره می کنیم. ما ویژگی src (URL فایل تصویری) را در متغیر src ذخیره می کنیم. سپس با تنظیم ویژگی visibility CSS روی hidden، عنصر img را پنهان می کنیم.
در نهایت عنصر img اصلی (که پنهان است) را با یک عنصر div جدید ایجاد شده جایگزین می کنیم که AlphaImageLoader با موفقیت به آن متصل شده است.
استفاده از برنامه‌نویسی DOM برای تزریق AlphaImageLoader - فیلتر کردن بیت‌ها در جریان - جنبه بد اما ضروری خود را دارد - CSS بد. علاوه بر این، عناصر div غیر معنایی خارج از نشانه‌گذاری (X)HTML شما قرار خواهند گرفت. و تا زمانی که همه اینها در نظرات مشروط توضیح داده شده است، دیگر شانسی برای خراب شدن سایر مرورگرها توسط کد مایکروسافت وجود ندارد. (هندی بلاگر: در اینجا جف سعی می کند به طرز ماهرانه ای به راه حل «دست و پا چلفتی» مایکروسافت اشاره کند)
اگر مجبور به انجام کاری نادرست هستید، حداقل می توانید آن را استخراج کنید و از هر چیز دیگری که به آن نیاز ندارد جدا نگه دارید.
PNG، به عنوان یک فرمت گرافیکی، مزایای فنی زیادی فراتر از مواردی که به طور گسترده در GIF استفاده می شود، ارائه می دهد. در واقع، مزایا آنقدر زیاد است که PNG می‌توانست مدت‌ها پیش به عنوان یک فرمت گرافیکی بی‌ربط با عکس‌های عکس استفاده شود. عدم پشتیبانی اینترنت اکسپلورر از برخی از ویژگی های مهم PNG، مانند شفافیت کانال آلفا، در نتیجه بسیاری از توسعه دهندگان وب را خاموش کرده است. اما دو دلیل بسیار خوب وجود دارد که چرا نباید از PNG بترسید.
اول، حتی اینترنت اکسپلورر 6 و نسخه های قبلی آن تقریباً به طور کامل از PNG از نظر آنچه که GIF می تواند انجام دهد (البته به جز انیمیشن) پشتیبانی می کند. PNG تقریباً همیشه اندازه فایل کوچک‌تری را نشان می‌دهد و به آنها اجازه می‌دهد سریع‌تر بارگیری شوند و از منابع کمتری استفاده کنند.
دوم اینکه اینترنت اکسپلورر 7 از شفافیت آلفا PNG پشتیبانی کامل می کند. اثراتی که می توان با طیف کامل گزینه های شفاف به دست آورد تقریباً نامحدود است. من انتظار دارم که طراحانی که راه‌های جالبی برای استفاده از شفافیت PNG پیدا می‌کنند، در امتداد مواردی که در این مقاله توضیح داده شد، دری را به سطح جدیدی از سبک‌ها باز کنند که قبلاً دیده نشده است. من به شما ایده های مفیدی درباره آنچه که می توانید با شفافیت PNG ایجاد کنید ارائه کرده ام، اما به همین جا بسنده نکنید. به دنبال خودت باش!
گزیده ای از Web Standards Creativity نوشته کامرون آدامز، مارک بولتون، اندی کلارک، سایمون کولیسون، جف کرافت، اتان مارکوت، درک فیدرستون، ایان لوید، دن روبین، و راب ویچرت. ارسال شده توسط دوستان ED حق چاپ جف کرافت 2007. با اجازه از Apress, Inc.
