შეცვალოთ PNG გამოსახულების ფერი CSS-ით?

(10)

რედაქტირება-- Font-Awesome იყენებს სხვადასხვა კლასის სახელებსახალი ვერსია

, ალბათ იმიტომ, რომ ეს მნიშვნელოვნად ამცირებს CSS ფაილებს და თავიდან აიცილებს ორაზროვან CSS კლასებს. ასე რომ, ახლა თქვენ უნდა გამოიყენოთ: არ არის საჭირო მთელი შრიფტის აკრეფა, თუ მხოლოდ ერთი ხატულა გინდათ, გარდა ამისა, ვგრძნობ, რომ ის უფრო "სუფთაა"ცალკე ელემენტი

. ასე რომ, ამ მიზნით HTML5-ში შეგიძლიათ მოათავსოთ SVG პირდაპირ დოკუმენტის ნაკადში. შემდეგ შეგიძლიათ განსაზღვროთ კლასი .CSS სტილის ფურცელში და შეხვიდეთ მის ფონის ფერზე Fill თვისების გამოყენებით:

გაითვალისწინეთ, რომ მაგალითში მე გამოვიყენე :hover ქცევის საილუსტრაციოდ; თუ უბრალოდ გსურთ შეცვალოთ ფერი "ნორმალური" მდგომარეობისთვის, უნდა ამოიღოთ ფსევდოკლასი.

ვპასუხობდი, რადგან ვეძებდი გამოსავალს ამისთვის.

სახელური @chrscblls-ზე კარგად პასუხობს, თუ თქვენ გაქვთ თეთრი ან შავი ფონი, მაგრამ მე არა. ასევე, სურათები შეიქმნა ng-repeat-ის გამოყენებით, ასე რომ, მე არ შემეძლო ჩემი url ჩემს css-ში და თქვენ არ შეგიძლიათ გამოიყენოთ ::after on img tags.

ასე რომ, მე გადავწყვიტე გამეკეთებინა ეს და ვფიქრობდი, რომ ეს შეიძლება დაეხმაროს ხალხს, თუ ისინიც აქ დაბრკოლდებიან.

• ასე რომ, მე თითქმის იგივე გავაკეთე სამი ძირითადი განსხვავებებით:
• url, რომელიც მდებარეობს ჩემს img ტეგში, მე ვდებ მას (და ლეიბლს) სხვა დივში, რომელსაც აქვს:: სამუშაოს შემდეგ.
• „mix-blend-mode“ დაყენებულია „difference“-ზე „გამრავლების“ ან „ეკრანის“ ნაცვლად.

შავიდან თეთრად ან თეთრიდან შავზე რომ შეცვალოთ, ფონის ფერი უნდა იყოს თეთრი. შავიდან ფერამდე, შეგიძლიათ აირჩიოთ ნებისმიერი ფერი. თეთრიდან ფერამდე უნდა აირჩიოთ სასურველის საპირისპირო ფერი.

DivClass( პოზიცია: ფარდობითი; სიგანე: 100%; სიმაღლე: 100%; ტექსტის გასწორება: მარცხნივ; ) .divClass:hover::after, .divClass:hover:: ადრე(პოზიცია: აბსოლუტური; სიგანე: 100%; სიმაღლე: 100% ფონი: #FFF: mix-blend-mode: სხვაობა: "";

img ტეგებს აქვს ფონის თვისება, ისევე როგორც სხვა. თუ თქვენ გაქვთ თეთრი PNG გამჭვირვალე ფორმის, შაბლონის მსგავსი, შეგიძლიათ გააკეთოთ ეს:

ფერის ფაქტიურად შესაცვლელად, შეგიძლიათ ჩართოთ CSS გადასვლა -webkit ფილტრით, სადაც, როდესაც რამე მოხდება, თქვენ გამოიყენებთ -webkit ფილტრს თქვენი არჩევანით. მაგალითად:

Img ( -webkit-filter: grayscale(0%); transition: -webkit-filter .3s linear; ) img:hover ( -webkit-filter: grayscale(75%); )

მე ვიპოვე ეს შესანიშნავი კოდეპენის მაგალითი, რომელიც თქვენ ჩასვით მნიშვნელობაში თექვსმეტი ფერი,და ის აბრუნებს აუცილებელ ფილტრს ამ ფერის png-ზე გამოსაყენებლად

მაგალითად, მე მჭირდებოდა ჩემი png შემდეგი ფერი #1a9790

შემდეგ თქვენ უნდა გამოიყენოთ შემდეგი png ფილტრი

ფილტრი: ინვერტული (48%) სეპია (13%) გაჯერებული (3207%) შეფერილობის როტაცია (130 გრადუსი) სიკაშკაშე (95%) კონტრასტი (80%);

მე შევძელი ამის გაკეთება SVG ფილტრის გამოყენებით. შეგიძლიათ დაწეროთ ფილტრი, რომელიც ამრავლებს ორიგინალური სურათის ფერს იმ ფერზე, რომლის შეცვლაც გსურთ. ქვემოთ მოცემულ კოდის ნაწყვეტში წყალდიდობის ფერიარის ფერი, რომლის შეცვლაც გვინდა გამოსახულების ფერის (in ამ შემთხვევაშიწითელია). FeComposite ეუბნება ფილტრს, თუ როგორ ვამუშავებთ ფერს. feComposite ფორმულა არითმეტიკით არის (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), სადაც i1 და i2 არის in/in2-ის შეყვანის ფერები, შესაბამისად. ასე რომ, მხოლოდ k1 = 1-ის დაზუსტება ნიშნავს, რომ ის გააკეთებს მხოლოდ i1 * i2, რაც ნიშნავს ორივე შეყვანის ფერის ერთად გამრავლებას.

შენიშვნა. ეს მუშაობს მხოლოდ HTML5-თან, რადგან ის იყენებს inline SVG-ს. მაგრამ მე ვფიქრობ, რომ თქვენ შეგიძლიათ ეს იმუშაოთ ძველ ბრაუზერთან ერთად SVG-ის ცალკე ფაილში ჩასმით. ეს მიდგომა ჯერ არ გამომიცდია.

აი ფრაგმენტი:

რეალურად არსებობს Photoshop-ში ობიექტის ფერის შეცვლის მრავალი გზა. ადრე ჩვენ უკვე განვიხილეთ, თუ როგორ უნდა გავაკეთოთ ეს, და ასევე ვისწავლეთ როგორ შეცვალოთ თმის ფერი Photoshop-ში.

ეს არ არის ყველა მეთოდი, დღეს მე გაჩვენებთ ორ ძალიან მარტივ მეთოდს და მომავალ სტატიებში ვისაუბრებ კიდევ რამდენიმე მეთოდზე სხვა კორექტირების ფენების გამოყენებით.

მეთოდი No1

მოკლედ ვისაუბრებ ამ მეთოდის გამოყენებაზე. გახსენით სურათი და შექმენით ახალი ფენა (შეგახსენებთ ყველა ტექნიკას).

შემდეგ შეცვალეთ ამ ფენის შერწყმის რეჟიმი ფენების პალიტრის (მდებარეობს სიის ბოლოში) ჩამოსაშლელი სიიდან Hue-ის არჩევით.

ამის შემდეგ აირჩიეთ B კლავიშის დაჭერით, დააწკაპუნეთ წინა პლანზე ფერის ინდიკატორზე, პალიტრის დიალოგურ ფანჯარაში, რომელიც გამოჩნდება, აირჩიეთ ჩრდილი და დააჭირეთ ღილაკს OK. ახალი ფენის შერჩევის შემდეგ, დახაზეთ ობიექტის თავზე.

თუ ზედმეტს ხატავთ, შეგიძლიათ დროებით აირჩიოთ Eraser ინსტრუმენტი E კლავიშის დაჭერით და დაჭერით. თქვენ შეგიძლიათ თავიდან აიცილოთ ასეთი სიტუაციები წინასწარ, ახალ ფენაზე ფენის ნიღბის დამატებით და იმ უბნების დამალვით, რომელთა შეცვლაც არ არის საჭირო შავით.

შენიშვნა

თუ ტერიტორია, რომელსაც ხელახლა ღებავთ, გარშემორტყმულია შავი, თეთრი და ნაცრისფერი ფერებით, შეგიძლიათ უსაფრთხოდ დახატოთ ეს უკანასკნელი და ისინი საერთოდ არ შეიცვლება. ეს იმიტომ ხდება, რომ Hue blend რეჟიმში, ფერებით სავსე უბნები გავლენას ახდენს მხოლოდ იმ ფენის უბნებზე, რომლებიც უკვე შეიცავს ფერს.

მეთოდი No2

გახსოვთ მენიუს ბრძანება? მენიუს მსგავსი ბრძანება შეცვალეთ ფერიშეიძლება გამოყენებულ იქნას ერთი ჩრდილის ხაზგასასმელად და მეორეთი ჩანაცვლებისთვის. ეს ბრძანება ძალიან კარგად მუშაობს, თუ ფერი, რომელიც უნდა შეიცვალოს, მეტ-ნაკლებად ერთგვაროვანია და კონცენტრირებულია გარკვეულ ზონაში, ისევე როგორც მანქანის კორპუსი ზემოთ სურათზე.

მენიუდან ბრძანების არჩევა გამოსახულება - კორექტირება - ფერის შეცვლა, დაინახავთ ამავე სახელწოდების დიალოგურ ფანჯარას.

მას უკვე აქვს შერჩეული Eyedropper ინსტრუმენტი, ამიტომ დააწკაპუნეთ სურათზე იმ ჩრდილზე, რომლის შეცვლაც გსურთ. ის გამოჩნდება კვადრატში წარწერით ფერისაკონტროლო ჯგუფში შერჩევადიალოგური ფანჯრის ზედა ნაწილში.

საკონტროლო ჯგუფში ჩანაცვლებადიალოგური ფანჯრის ბოლოში დააწკაპუნეთ კვადრატზე, რომელიც მდებარეობს წარწერის ზემოთ შედეგიახალი ჩრდილის შესარჩევად. როდესაც დააჭირეთ ღილაკს OK. თუ არჩეული ჩრდილის დარეგულირება გჭირდებათ, შეგიძლიათ გამოიყენოთ სლაიდერები ფერის ტონი, გაჯერებადა სიკაშკაშე(ასევე გვხვდება შერჩევის საკონტროლო ჯგუფში). აი რა მოხდა:

გთხოვთ გაითვალისწინოთ, რომ ჩვეულებრივი პიპეტის გარდა, ახლოს არის პიპეტები პატარა "+" (პლუს) და "-" (მინუს) ხატებით. გამოიყენეთ ისინი შესაცვლელი ჩრდილების დიაპაზონის გასადიდებლად/შევიწროებისთვის.

როგორც ხედავ, ცოტა გადავაჭარბე და ჩემი მანქანის დისკებიც იასამნისფერი გახდა. ეს იმაზე მეტყველებს ამ მეთოდითშეიძლება ყოველთვის არ იყოს სასარგებლო.

თუ ტექსტში შენიშნეთ შეცდომა, აირჩიეთ და დააჭირეთ Ctrl + Enter. გმადლობთ!

თუ ფაილის PNG ფორმატში რედაქტირება გჭირდებათ, ბევრი ჩქარობს Photoshop-ის ჩამოტვირთვას, რომელიც არა მხოლოდ ნაწილდება საფასურად, არამედ საკმაოდ მოთხოვნადია კომპიუტერის რესურსებზე. ყველა ძველ კომპიუტერს არ შეუძლია ამ აპლიკაციის გაშვება. ასეთ შემთხვევებში, სხვადასხვა ონლაინ რედაქტორები მოდიან სამაშველოში, რაც საშუალებას გაძლევთ შეცვალოთ ზომა, მასშტაბირება, შეკუმშვა და შეასრულოთ მრავალი სხვა ოპერაცია ფაილებით.

დღეს ჩვენ გადავხედავთ ყველაზე ფუნქციონალურ და სტაბილურ საიტებს, რომლებიც საშუალებას გაძლევთ იმუშაოთ სურათებთან PNG ფორმატში. ასეთი ონლაინ სერვისების უპირატესობებში შედის ის ფაქტი, რომ ისინი არ არიან მომთხოვნი თქვენი კომპიუტერის რესურსებზე, რადგან ფაილებთან ყველა მანიპულირება ხორციელდება ღრუბლოვანი ტექნოლოგიების გამოყენებით.

ონლაინ რედაქტორებს არ სჭირდებათ თქვენს კომპიუტერზე დაყენება - ეს მნიშვნელოვნად ამცირებს ვირუსის დაჭერის ალბათობას.

მეთოდი 1: ონლაინ გამოსახულების რედაქტორი

ყველაზე ფუნქციონალური და სტაბილური სერვისი, რომელიც მომხმარებლებს არ აწუხებს ინტრუზიული რეკლამით. გამოდგება ნებისმიერი მანიპულირებისთვის PNG სურათები, თქვენი კომპიუტერის რესურსების აბსოლუტურად არამოთხოვნილი, შეიძლება გაშვებული იყოს მობილურ მოწყობილობებზე.

სერვისის უარყოფითი მხარე მოიცავს რუსული ენის ნაკლებობას, თუმცა, ხანგრძლივი გამოყენების შემთხვევაში ეს მინუსიშეუმჩნეველი ხდება.

საიტი არ საჭიროებს რეგისტრაციას, სერვისის გაგება მარტივია, მაშინაც კი, თუ არ იცით ინგლისური. ნუ შეგეშინდებათ ექსპერიმენტების, თუ რამე არასწორედ მოხდება, თქვენ ყოველთვის შეგიძლიათ გააუქმოთ მხოლოდ ერთი ღილაკის დაჭერით.

მეთოდი 2: Photoshop ონლაინ

დეველოპერები თავიანთ სერვისს აყენებენ ონლაინ Photoshop-ად. რედაქტორის ფუნქციონირება მართლაც ჰგავს მსოფლიოში ცნობილ აპლიკაციას, ის მხარს უჭერს სურათებთან მუშაობას სხვადასხვა ფორმატში, მათ შორის PNG. თუ ოდესმე გიმუშავიათ Photoshop-თან, რესურსის ფუნქციონალურობის გაგება რთული არ იქნება.

საიტის ერთადერთი, მაგრამ საკმაოდ მნიშვნელოვანი ნაკლი არის მუდმივი გაყინვა, განსაკუთრებით თუ მუშაობთ დიდ სურათებთან.

მარტივი მანიპულაციების შესრულებისას სერვისთან მუშაობა მოსახერხებელი და კომფორტულია. თუ საჭიროა დიდი ფაილის დამუშავება, სასურველია ჩამოტვირთოთ და დააინსტალიროთ სპეციალური პროგრამული უზრუნველყოფაან მოთმინებით მოემზადეთ საიტის მუდმივი გაყინვისთვის.

მეთოდი 3: Fotor

მოსახერხებელი, ფუნქციონალური და რაც მთავარია უფასო საიტი PNG ფორმატში სურათებთან მუშაობისთვის, Fotor საშუალებას გაძლევთ ამოჭრათ, დაატრიალოთ, დაამატოთ ეფექტები და გამოიყენოთ სხვა ინსტრუმენტები. რესურსის ფუნქციონალობა შემოწმდა სხვადასხვა ზომის ფაილებზე და არანაირი პრობლემა არ მოიძებნა. საიტი ითარგმნა რუსულად, საჭიროების შემთხვევაში, შეგიძლიათ აირჩიოთ სხვა რედაქტორის ინტერფეისის ენა.

წვდომა დამატებითი ფუნქციებიმომხმარებლებს მიეწოდება მხოლოდ PRO ანგარიშის შეძენის შემდეგ.

Fotor არის მძლავრი ინსტრუმენტი PNG-თან მუშაობისთვის: ძირითადი ფუნქციების ნაკრების გარდა, შეიცავს ბევრ დამატებით ეფექტს, რომელიც მოეწონება ყველაზე მომთხოვნი მომხმარებლისთვისაც კი.

ონლაინ ფოტო რედაქტორების გამოყენება მარტივია, მათ არ სჭირდებათ ინსტალაცია კომპიუტერზე, ასე რომ თქვენ შეგიძლიათ მათთან წვდომა მობილური მოწყობილობა. რომელი რედაქტორი გამოიყენოთ, თქვენზეა დამოკიდებული.

მთავარია მიუთითოთ სურათი თქვენს კომპიუტერზე ან ტელეფონზე, შეარჩიოთ სასურველი ფერები, რომ შეცვალოთ, დააწკაპუნეთ OK გვერდის ბოლოში, დაელოდეთ რამდენიმე წამს და ჩამოტვირთეთ დასრულებული შედეგი.

ვარდის ფოტო ცვლილებების გარეშე და ვარდისფერი ფერით შეიცვალა: იისფერი, ლურჯი, ფირუზისფერი, მწვანედა ყვითელი:


ზემოთ მოყვანილი მაგალითების შესაქმნელად გამოყენებული იქნა შემდეგი პარამეტრები: შემცვლელი ფერი" - "ვარდისფერი", " შესაცვლელი ფერი" - "იისფერი" (მომდევნო დამუშავებისთვის "ლურჯი" და ა.შ.), " ფერის ჩანაცვლების ინტენსივობა" - "45".

თუ ყველაფერი ხდება მონოქრომატული, ძალიან ბევრი შეიცვლება, ან სხვა ფერებზე მოქმედებს, მაშინ თქვენ უნდა შეამციროთ „ფერის ჩანაცვლების ინტენსივობა“. პირიქით, თუ ცვლილებები არ ჩანს ან ფერი მთლიანად არ არის ჩანაცვლებული, მაშინ თქვენ უნდა გაზარდოთ „ფერის ჩანაცვლების ინტენსივობა“ და ასევე დარწმუნდით, რომ სწორად მიუთითეთ ფერები და არ აურიეთ, მაგალითად, წითელი ვარდისფერთან. ფერის უფრო ზუსტად დასაზუსტებლად, შეგიძლიათ გამოიყენოთ HEX ფორმატი. პარამეტრები შეიძლება განსხვავდებოდეს სხვადასხვა სურათებისთვის, ეს დამოკიდებულია როგორც ფერზე, ასევე პიქსელის ზომაზე.

გთხოვთ გაითვალისწინოთ, რომ თქვენ არ შეგიძლიათ ჩანაცვლება შავი, ნაცრისფერი ან თეთრიზოგიერთზე მდიდარი ფერი, მაგრამ შეგიძლიათ შეცვალოთ გაჯერებული ფერი თითქმის თეთრი, შავი ან ნაცრისფერი ფერით. მარტივად რომ ვთქვათ, შეგიძლიათ შეცვალოთ ცისარტყელის ნებისმიერი ფერი ან ახლოს იმ ფერებთან, რომლებიც ხელმისაწვდომია ჩამოსაშლელ სიებში პარამეტრებში. ამის მიზეზი ის არის, რომ ფერის შეცვლის ალგორითმი ასოცირდება ტონის ცვლილებასთან, რაც გავლენას არ ახდენს ნაცრისფერ ან შავ-თეთრ სურათებზე. თუ თქვენ გჭირდებათ 14 მეგაპიქსელზე მეტი (≈4592x3048) დიდი სურათის დამუშავება, მაშინ გაგზავნეთ იგი საფოსტო ყუთში თქვენთვის საჭირო პარამეტრებით - ეს გაკეთდება უფასოდ 24 საათის განმავლობაში.

ორიგინალური სურათი არანაირად არ შეცვლილა. მოგეწოდებათ სხვა დამუშავებული სურათი.