تغییر رنگ تصویر PNG از طریق CSS؟ (10)
ویرایش --
Font-Awesome در نسخه جدید از نام کلاس های مختلف استفاده می کند، احتمالاً به این دلیل که فایل های CSS را به میزان قابل توجهی کوچکتر می کند و از کلاس های CSS مبهم جلوگیری می کند. بنابراین اکنون باید از:
اگر فقط یک نماد می خواهید نیازی به تایپ کل فونت نیست، بعلاوه من احساس می کنم به عنوان یک عنصر مستقل "تمیز" تر است. بنابراین، برای این منظور در HTML5 می توانید SVG را مستقیماً در جریان سند قرار دهید. سپس می توانید کلاس را در stylesheet .CSS تعریف کنید و با استفاده از ویژگی fill به رنگ پس زمینه آن دسترسی پیدا کنید:
توجه داشته باشید که در مثالی که من از :hover برای نشان دادن رفتار استفاده کردم. اگر فقط می خواهید رنگ را برای حالت "عادی" تغییر دهید، باید کلاس شبه را حذف کنید.
جواب دادم چون دنبال راه حلی برای این موضوع بودم.
دسته در @chrscblls به خوبی پاسخ می دهد اگر پس زمینه سفید یا سیاه دارید، اما من این کار را نکردم. همچنین، تصاویر با استفاده از ng-repeat تولید شده‌اند، بنابراین من نمی‌توانم آدرس اینترنتی خود را در css خود داشته باشم و شما نمی‌توانید از تگ‌های ::after on img استفاده کنید.
بنابراین تصمیم گرفتم آن را اجرا کنم و فکر کردم که اگر مردم نیز در اینجا دست و پا می زنند، ممکن است به آنها کمک کند.
بنابراین من تقریباً همان کار را با سه تفاوت اصلی انجام دادم:
- url که در تگ img من قرار دارد، آن را (و برچسب) را در div دیگری قرار دادم که دارای:: after work است.
- "mix-blend-mode" به جای "multiply" یا "screen" روی "تفاوت" تنظیم شده است.
- من یک::before را دقیقاً با همان مقدار اضافه کردم تا ::after "تفاوت" "تفاوت"های ساخته شده توسط ::before را انجام دهد و آن را لغو کند.
برای تغییر آن از سیاه به سفید یا سفید به سیاه، رنگ پس زمینه باید سفید باشد. از مشکی تا رنگی، می توانید هر رنگی را انتخاب کنید. از رنگ سفید به رنگ دیگر باید رنگ مخالف رنگ مورد نظر خود را انتخاب کنید.
DivClass( موقعیت: نسبی؛ عرض: 100%؛ ارتفاع: 100%؛ تراز نوشتاری: چپ؛ ) .divClass:hover::after، .divClass:hover::before( موقعیت: مطلق؛ عرض: 100%؛ ارتفاع: 100% پس زمینه: #FFF: mix-blend-mode: تفاوت: "";
تگ‌های img مانند سایر تگ‌ها دارای یک ویژگی پس‌زمینه هستند. اگر یک PNG سفید با شکل شفاف مانند یک شابلون دارید، می توانید این کار را انجام دهید:
برای تغییر واقعی رنگ، می‌توانید یک انتقال CSS را با فیلتر -webkit فعال کنید، جایی که وقتی اتفاقی می‌افتد از فیلتر -webkit مورد نظر خود استفاده می‌کنید. مثلا:
Img ( -webkit-filter: grayscale(0%)؛ انتقال: -webkit-filter 0.3s خطی؛ ) img:hover ( -webkit-filter: grayscale(75%)؛ )
من این نمونه کدپن عالی را پیدا کردم که شما در یک مقدار وارد می کنید رنگ شش گوش،و فیلتر لازم را برای اعمال آن رنگ به png برمی گرداند
به عنوان مثال من به png من نیاز داشتم که رنگ زیر را داشته باشد #1a9790
سپس باید فیلتر png زیر را برای خود اعمال کنید
فیلتر: معکوس (48%) sepia (13%) saturate (3207%) hue-rotate (130 deg) روشنایی (95%) کنتراست (80%).
من توانستم این کار را با استفاده از فیلتر SVG انجام دهم. می توانید فیلتری بنویسید که رنگ تصویر اصلی را در رنگی که می خواهید تغییر دهید ضرب می کند. در قطعه کد زیر رنگ سیلابیرنگی است که می خواهیم رنگ تصویر را تغییر دهیم (در این مورد قرمز است). FeComposite به فیلتر می گوید که چگونه رنگ را پردازش می کنیم. فرمول feComposite با محاسبات (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) است که i1 و i2 به ترتیب رنگ‌های ورودی in/in2 هستند. بنابراین مشخص کردن فقط k1 = 1 به این معنی است که فقط i1 * i2 را انجام می دهد، که به معنای ضرب هر دو رنگ ورودی با هم است.
توجه داشته باشید. این فقط با HTML5 کار می کند زیرا از SVG درون خطی استفاده می کند. اما من فکر می کنم با قرار دادن SVG در یک فایل جداگانه می توانید این کار را با یک مرورگر قدیمی تر انجام دهید. من هنوز این روش را امتحان نکرده ام.
این یک قطعه است:
نکته اصلی این است که تصویر را در رایانه یا تلفن خود نشان دهید، رنگ های مورد نظر را برای جایگزینی انتخاب کنید، روی OK در پایین صفحه کلیک کنید، چند ثانیه صبر کنید و نتیجه نهایی را دانلود کنید.
عکس گل رز بدون تغییر و با رنگ صورتی جایگزین: بنفش, آبی, فیروزه, سبزو رنگ زرد:
برای ایجاد نمونه های بالا از تنظیمات زیر استفاده شده است: رنگ جایگزین" - "رنگ صورتی"، " رنگ برای جایگزینی" - "بنفش" (برای پردازش بعدی "آبی"، و غیره)، " شدت جایگزینی رنگ" - "45".
اگر همه چیز تک رنگ شد، مقدار زیادی جایگزین شد، یا رنگ های دیگر تحت تأثیر قرار گرفتند، باید «شدت جایگزینی رنگ» را کاهش دهید. برعکس، اگر هیچ تغییری قابل مشاهده نیست یا رنگ به طور کامل جایگزین نشده است، باید "شدت جایگزینی رنگ" را افزایش دهید و همچنین مطمئن شوید که رنگ ها را به درستی مشخص کرده اید و مثلا قرمز را با صورتی اشتباه نگرفته اید. برای تعیین دقیق تر رنگ، می توانید از فرمت HEX استفاده کنید. تنظیمات ممکن است برای تصاویر مختلف متفاوت باشد، این به رنگ و اندازه پیکسل در پیکسل بستگی دارد.
لطفا توجه داشته باشید که نمی توانید جایگزین کنید سیاه، خاکستری یا سفیددر برخی از رنگ اشباع شده، اما می توانید رنگ اشباع شده را با رنگ تقریبا سفید، سیاه یا خاکستری جایگزین کنید. به عبارت ساده، می توانید هر رنگی از رنگین کمان یا نزدیک به آن رنگ هایی را که در لیست های کشویی موجود در تنظیمات موجود است، جایگزین کنید. دلیل این امر این است که الگوریتم جایگزینی رنگ با تغییر تن همراه است که بر تصاویر سیاه و سفید تأثیر نمی گذارد. اگر نیاز به پردازش یک تصویر بزرگ با وضوح بیش از 14 مگاپیکسل (≈4592x3048) دارید، آن را با تنظیمات مورد نیاز به صندوق پستی ارسال کنید - در عرض 24 ساعت به صورت رایگان انجام می شود.
تصویر اصلی به هیچ وجه تغییر نکرده است. تصویر پردازش شده دیگری در اختیار شما قرار خواهد گرفت.
در واقع وجود دارد راه های زیادی برای تغییر رنگ یک شی در فتوشاپ. قبلاً نحوه انجام این کار را با استفاده از روش انجام دادیم و همچنین یاد گرفتیم که چگونه با استفاده از فتوشاپ رنگ مو را تغییر دهیم.
اینها همه روش نیستند، امروز دو روش بسیار ساده را نشان خواهم داد و در مقالات آینده در مورد چند روش دیگر با استفاده از لایه های تنظیم دیگر صحبت خواهم کرد.
روش شماره 1
من به طور خلاصه در مورد کاربرد این روش صحبت خواهم کرد. تصویر را باز کنید و یک لایه جدید ایجاد کنید (تمام تکنیک ها را به شما یادآوری می کنم).
سپس با انتخاب Hue از لیست کشویی در بالای پالت لایه ها (در پایین لیست) حالت ترکیب این لایه را تغییر دهید.
پس از آن، با فشار دادن کلید B را انتخاب کنید، روی نشانگر رنگ پیش زمینه کلیک کنید، در کادر محاوره ای پالت که ظاهر می شود، یک سایه را انتخاب کنید و روی دکمه OK کلیک کنید. پس از انتخاب یک لایه جدید، روی شیء بکشید.
اگر بیش از حد را رنگ کنید، می توانید به طور موقت ابزار Eraser را با فشار دادن و نگه داشتن کلید E انتخاب کنید. می توانید با اضافه کردن یک لایه ماسک به لایه جدید و مخفی کردن مناطقی که نیازی به تغییر ندارند با رنگ مشکی از چنین موقعیت هایی جلوگیری کنید.
توجه داشته باشید
اگر قسمتی را که دوباره رنگ می کنید با سیاه، سفید و خاکستری احاطه شده است، می توانید با خیال راحت روی دومی رنگ بزنید و به هیچ وجه تغییر نخواهند کرد. این به این دلیل است که در حالت ترکیبی Hue، نواحی پر از رنگ فقط بر روی نواحی از لایه زیرین تأثیر می‌گذارند که قبلاً حاوی رنگ هستند.
روش شماره 2
دستور منو را به خاطر دارید؟ دستور منوی مشابه رنگ را جایگزین کنیدمی توان از آن برای برجسته کردن یک سایه و جایگزینی آن با سایه دیگر استفاده کرد. اگر رنگی که نیاز به تعویض دارد کم و بیش یکنواخت و در ناحیه خاصی متمرکز شده باشد، مانند بدنه خودرو در تصویر بالا، این دستور بسیار خوب عمل می کند.
انتخاب دستور از منو تصویر - تصحیح - جایگزین رنگ، یک کادر محاوره ای به همین نام خواهید دید.
در حال حاضر ابزار Eyedropper انتخاب شده است، بنابراین روی سایه در تصویری که می خواهید جایگزین کنید کلیک کنید. در یک مربع با کتیبه ظاهر می شود رنگدر گروه کنترل انتخابدر بالای کادر محاوره ای
در گروه کنترل جایگزینیدر پایین کادر محاوره ای، روی مربع واقع در بالای کتیبه کلیک کنید نتیجهبرای انتخاب یک سایه جدید وقتی روی دکمه OK کلیک می کنید. اگر نیاز به تنظیم سایه انتخاب شده دارید، می توانید از لغزنده ها استفاده کنید تن رنگ, اشباعو روشنایی(همچنین در گروه کنترل انتخاب یافت می شود). این چیزی است که اتفاق افتاد:
لطفاً توجه داشته باشید که علاوه بر پیپت معمولی، پیپت هایی با نمادهای کوچک "+" (به علاوه) و "-" (منهای) در نزدیکی شما وجود دارد. از آنها برای گسترش/کاهش طیف سایه هایی که نیاز به تغییر دارند استفاده کنید.
همانطور که می بینید کمی زیاده روی کردم و چرخ های ماشینم هم بنفش شد. این نشان می دهد که این روش ممکن است همیشه مفید نباشد.
اگر خطایی در متن مشاهده کردید، آن را انتخاب کنید و Ctrl + Enter را فشار دهید. متشکرم!
اگر نیاز به ویرایش فایلی با فرمت PNG دارید، بسیاری برای دانلود فتوشاپ عجله می کنند که نه تنها با پرداخت هزینه توزیع می شود، بلکه برای منابع رایانه ای نیز بسیار سخت است. همه رایانه های شخصی قدیمی قادر به اجرای این برنامه نیستند. در چنین مواردی، ویرایشگرهای آنلاین مختلف به کمک می آیند و به شما امکان می دهند اندازه، مقیاس، فشرده سازی و انجام عملیات های متعدد دیگر را با فایل ها انجام دهید.
امروز ما کاربردی ترین و پایدارترین سایت هایی را که به شما امکان کار با تصاویر با فرمت PNG را می دهند را بررسی خواهیم کرد. مزایای چنین خدمات آنلاین شامل این واقعیت است که آنها به منابع رایانه شما نیاز ندارند، زیرا تمام دستکاری ها با فایل ها با استفاده از فناوری های ابری انجام می شود.
ویرایشگرهای آنلاین نیازی به نصب روی رایانه شخصی شما ندارند - این به طور قابل توجهی احتمال ابتلا به ویروس را کاهش می دهد.
روش 1: ویرایشگر تصویر آنلاین
کاربردی ترین و پایدارترین سرویسی که با تبلیغات سرزده کاربران را آزار نمی دهد. مناسب برای هر گونه دستکاری با تصاویر PNG، کاملا بی نیاز از منابع کامپیوتر شما، و قابل اجرا بر روی دستگاه های تلفن همراه.
از معایب این سرویس می توان به فقدان زبان روسی اشاره کرد، اما با استفاده طولانی مدت این عیب کمتر به چشم می آید.
این سایت نیازی به ثبت نام ندارد، حتی اگر انگلیسی بلد نباشید، درک خدمات آسان است از آزمایش نترسید، اگر مشکلی پیش آمد، همیشه می‌توانید آن را با کلیک کردن یک دکمه لغو کنید.
روش دوم: فتوشاپ آنلاین
توسعه دهندگان سرویس خود را به عنوان فتوشاپ آنلاین قرار می دهند. عملکرد ویرایشگر واقعاً شبیه به برنامه مشهور جهانی است که از کار با تصاویر در فرمت های مختلف از جمله PNG پشتیبانی می کند. اگر تا به حال با فتوشاپ کار کرده اید، درک عملکرد منبع کار دشواری نخواهد بود.
تنها اشکال اما نسبتاً مهم سایت انجماد مداوم است، به خصوص اگر با تصاویر بزرگ کار می کنید.
هنگام انجام دستکاری های ساده، کار با سرویس راحت و راحت است. اگر نیاز به پردازش یک فایل بزرگ دارید، توصیه می‌شود نرم‌افزار ویژه‌ای را دانلود و بر روی رایانه شخصی خود نصب کنید، یا صبور باشید و برای فریز شدن دائمی سایت آماده شوید.
روش 3: فوتور
Fotor یک سایت راحت، کاربردی و مهمتر از همه رایگان برای کار با تصاویر با فرمت PNG، به شما امکان برش، چرخش، افزودن افکت ها و استفاده از ابزارهای دیگر را می دهد. عملکرد منبع روی فایل هایی با اندازه های مختلف آزمایش شد و هیچ مشکلی پیدا نشد. سایت به روسی ترجمه شده است، در صورت لزوم می توانید زبان رابط ویرایشگر دیگری را انتخاب کنید.
دسترسی به ویژگی های اضافی تنها پس از خرید یک حساب PRO در اختیار کاربران قرار می گیرد.
Fotor یک ابزار قدرتمند برای کار با PNG است: علاوه بر مجموعه ای از توابع اساسی، حاوی بسیاری از جلوه های اضافی است که حتی کاربران سختگیر را نیز خوشحال می کند.
استفاده از ویرایشگرهای عکس آنلاین آسان است. اینکه از کدام ویرایشگر استفاده کنید به شما بستگی دارد.
