نحوه نمایش رنگی تصاویر png سفید با کد رنگ دلخواه

نحوه نمایش رنگی تصاویر png سفید با کد رنگ دلخواه

خب مشکل من از جایی شروع شد که قرار شد یک لیست از تصاویر png (که همه سفید هستند) به همراه کد رنگ هاشون از Api بگیرم و به صورت آیکون های رنگی نمایش بدم.نمونه عکس سفیدکه البته اگر از حالت روز در ویرگول استفاده کنید این عکس رو نخواهید دید چون بک گراند سفیده و عکس هم سفیده و من بک گراند عکس رو تغییر ندادم تا کاملا متوجه مشکل بشوید.خلاصه بعداز کلی کلنجار رفتن با css خیلی کلافه شده بودم و فقط تونسته بودم باfilter: opacity(0.5) drop-shadow(0 0 0 #ff0000);یک مقدار رنگ به آیکون هام بدم اما اصلا قابل قبول نبود. مثلا کد بالا که رنگ عکس رو باید قرمز کنه تبدیل به عکس پایین می کنه:تصویر ایجاد شده با فیلتر cssهمونطور که ملاحضه می کنید تقریبا قرمز شده اما جالب و قابل قبول نیست.وپس از کلی سرچ و اتحان کردن روش های مختلف و فیلترهای مختلف به راهکار استفاده از svg رسیدم که دقیقا همون چیزی بود که من نیاز داشتم به تکه کد پایین دقت کنید.قطعه کد svg که تصویر رو لود میکنهباید دقت کنید که حتما باید id تگ filter با مقدار پراپرتی filter در image یکسان باشد و باید کد رنگ مورد نظر خودمون رو به پراپرتی flood-color در تگ feFlood تخصیص بدیم.که در نهایت نتیجه کد بالا به صورت عکس پایین نمایش داده می شود.تصویر ایجاد شده با استفاده ازفیلتر svgهمونطور که مشاهده می کنید تصویر دقیقا رنگ مورد نظر رو بنمایش داده و این دقیقا همون آیکون مد نظر من هست.در انتها تشکر میکنم که این پست رو مطالعه کردید و اگر راه بهتری به نظرتون رسید بهم اطلاع بدید.

منبع

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *