เปลี่ยนสีรูปภาพ PNG ผ่าน CSS หรือไม่ (10)
แก้ไข--
Font-Awesome ใช้ชื่อคลาสที่แตกต่างกันใน เวอร์ชั่นใหม่อาจเป็นเพราะมันทำให้ไฟล์ CSS มีขนาดเล็กลงอย่างมากและหลีกเลี่ยงคลาส CSS ที่ไม่ชัดเจน ตอนนี้คุณต้องใช้:
ไม่จำเป็นต้องตั้งค่าแบบอักษรทั้งหมดหากคุณต้องการเพียงไอคอนเดียว นอกจากนี้ ฉันรู้สึกว่ามัน "สะอาด" มากกว่าเมื่อเป็นองค์ประกอบแบบสแตนด์อโลน ดังนั้น เพื่อจุดประสงค์นี้ใน HTML5 คุณสามารถวาง SVG ภายในโฟลว์เอกสารได้โดยตรง จากนั้น คุณสามารถกำหนดคลาสในสไตล์ชีต .css และเข้าถึงสีพื้นหลังโดยใช้คุณสมบัติเติม:
โปรดทราบว่าในตัวอย่างฉันใช้ :hover เพื่อแสดงพฤติกรรม; หากคุณต้องการเปลี่ยนสีสำหรับสถานะ "ปกติ" คุณควรลบคลาสเทียมออก
ตอบเพราะฉันกำลังมองหาวิธีแก้ปัญหาสำหรับสิ่งนี้
ปากกาใน @chrscblls ตอบได้ดีถ้าคุณมีพื้นหลังสีขาวหรือดำ แต่ของฉันไม่มี นอกจากนี้ รูปภาพถูกสร้างขึ้นด้วย ng-repeat ดังนั้นฉันจึงไม่สามารถมี url ใน css ของฉันได้ และคุณไม่สามารถใช้ ::after ในแท็ก img
ดังนั้นฉันจึงตัดสินใจเข้าร่วมและคิดว่ามันอาจช่วยผู้คนได้หากพวกเขาสะดุดที่นี่
ดังนั้นฉันจึงทำเช่นเดียวกันโดยมีความแตกต่างหลักสามประการ:
- url ที่อยู่ในแท็ก img ของฉัน ฉันใส่ (และป้ายกำกับ) ใน div อื่นที่:: หลังเลิกงาน
- "mix-blend-mode" ถูกตั้งค่าเป็น "difference" แทน "multiply" หรือ "screen"
- ฉันเพิ่ม a::before ด้วยค่าเดียวกันทุกประการ เพื่อให้::after ทำ "difference" ของ "differences" ที่ทำโดย::before และ undoes
หากต้องการเปลี่ยนจากสีดำเป็นสีขาวหรือสีขาวเป็นสีดำ สีพื้นหลังต้องเป็นสีขาว จากสีดำเป็นสีคุณสามารถเลือกสีใดก็ได้ จากสีขาวเป็นสี คุณต้องเลือกสีตรงข้ามของสีที่คุณต้องการ
DivClass( ตำแหน่ง: สัมพันธ์; ความกว้าง: 100%; ความสูง: 100%; จัดข้อความ: ซ้าย; ) .divClass:hover::after, .divClass:hover::before( ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: #FFF; โหมดผสม: ความแตกต่าง; เนื้อหา: ""; )
แท็ก img มีคุณสมบัติพื้นหลังเหมือนแท็กอื่นๆ หากคุณมี PNG สีขาวที่มีรูปร่างโปร่งใส เช่น สเตนซิล คุณสามารถทำได้ดังนี้
หากต้องการเปลี่ยนสีอย่างแท้จริง คุณสามารถรวมการเปลี่ยน CSS กับตัวกรอง -webkit ซึ่งเมื่อมีบางอย่างเกิดขึ้น คุณจะใช้ตัวกรอง -webkit ที่คุณเลือก ตัวอย่างเช่น:
Img ( -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; ) img:hover ( -webkit-filter:grayscale(75%); )
ฉันพบตัวอย่างที่ยอดเยี่ยมของ codepen ที่คุณใส่ค่า สีฐานสิบหก,และส่งคืนฟิลเตอร์ที่จำเป็นเพื่อใช้สีนั้นกับ png
ตัวอย่างเช่นฉันต้องการให้ png ของฉันมีสีดังต่อไปนี้ #1a9790
จากนั้นคุณต้องใช้ตัวกรอง png ต่อไปนี้กับคุณ
ตัวกรอง: กลับด้าน (48%) ซีเปีย (13%) ความอิ่มตัว (3207%) สีหมุน (130 องศา) ความสว่าง (95%) คอนทราสต์ (80%)
ฉันสามารถทำได้ด้วยตัวกรอง SVG คุณสามารถเขียนฟิลเตอร์ที่คูณสีของภาพต้นฉบับด้วยสีที่คุณต้องการเปลี่ยน ในข้อมูลโค้ดด้านล่าง สีน้ำท่วมเป็นสีที่เราต้องการเปลี่ยนสีของภาพ (ในกรณีนี้คือสีแดง) FeComposite บอกฟิลเตอร์ว่าเรากำลังประมวลผลสีอย่างไร สูตร feComposite ที่มีเลขคณิตคือ (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) โดยที่ i1 และ i2 เป็นสีอินพุตสำหรับ in/in2 ตามลำดับ ดังนั้นการระบุเพียง k1 = 1 หมายความว่าจะทำเฉพาะ i1 * i2 ซึ่งหมายถึงการคูณสีอินพุตทั้งสองเข้าด้วยกัน
บันทึก. ใช้ได้กับ HTML5 เท่านั้นเพราะใช้ SVG แบบอินไลน์ แต่ฉันคิดว่าคุณสามารถใช้งานได้กับเบราว์เซอร์เก่าโดยใส่ SVG เข้าไป แยกไฟล์. ฉันยังไม่ได้ลองวิธีนี้
นี่คือตัวอย่าง:
หากคุณต้องการแก้ไขไฟล์ PNG หลายคนรีบดาวน์โหลด Photoshop ซึ่งไม่เพียงแจกจ่ายแบบชำระเงินเท่านั้น แต่ยังต้องการทรัพยากรคอมพิวเตอร์ค่อนข้างมาก พีซีรุ่นเก่าบางเครื่องไม่สามารถใช้งานแอปพลิเคชันนี้ได้ ในกรณีเช่นนี้ โปรแกรมแก้ไขออนไลน์ต่างๆ จะเข้ามาช่วยเหลือ ช่วยให้คุณปรับขนาด ปรับขนาด บีบอัด และดำเนินการอื่นๆ กับไฟล์ได้อีกมากมาย
วันนี้เราจะพิจารณาไซต์ที่ใช้งานได้ดีและเสถียรที่สุดที่อนุญาตให้คุณทำงานกับภาพ PNG ข้อดีของบริการออนไลน์ดังกล่าวรวมถึงความจริงที่ว่าพวกเขาไม่ต้องการทรัพยากรของคอมพิวเตอร์ของคุณ เนื่องจากการจัดการไฟล์ทั้งหมดดำเนินการโดยใช้เทคโนโลยีคลาวด์
ไม่จำเป็นต้องติดตั้งตัวแก้ไขออนไลน์บนพีซี - สิ่งนี้จะช่วยลดโอกาสในการติดไวรัสได้อย่างมาก
วิธีที่ 1: โปรแกรมแก้ไขรูปภาพออนไลน์
บริการที่ใช้งานได้และเสถียรที่สุดที่ไม่รบกวนผู้ใช้ด้วยโฆษณาที่ล่วงล้ำ เหมาะสำหรับการจัดการใด ๆ ภาพ PNGไม่ต้องการทรัพยากรของคอมพิวเตอร์ของคุณมากนัก สามารถทำงานบนอุปกรณ์เคลื่อนที่ได้
ข้อเสียของบริการรวมถึงการขาดภาษารัสเซีย อย่างไรก็ตาม เมื่อใช้เป็นเวลานาน ข้อเสียนี้แทบจะสังเกตไม่เห็น
เว็บไซต์ไม่จำเป็นต้องลงทะเบียน ง่ายต่อการจัดการกับบริการแม้ว่าคุณจะไม่รู้ก็ตาม ภาษาอังกฤษ. อย่ากลัวที่จะทดลอง หากเกิดข้อผิดพลาด คุณสามารถยกเลิกได้ด้วยการคลิกเพียงครั้งเดียว
วิธีที่ 2: Photoshop ออนไลน์
นักพัฒนาวางตำแหน่งบริการของพวกเขาเป็น Photoshop ออนไลน์ ฟังก์ชันการทำงานของโปรแกรมแก้ไขนั้นคล้ายกับแอปพลิเคชั่นที่มีชื่อเสียงระดับโลก รองรับการทำงานกับรูปภาพในรูปแบบต่าง ๆ รวมถึง PNG หากคุณเคยทำงานกับ Photoshop มาก่อน การเข้าใจการทำงานของทรัพยากรนั้นไม่ใช่เรื่องยาก
ข้อเสียเพียงอย่างเดียวแต่ค่อนข้างสำคัญของไซต์คือการค้างอย่างต่อเนื่อง โดยเฉพาะอย่างยิ่งหากคุณทำงานกับรูปภาพขนาดใหญ่
เมื่อทำการปรับแต่งง่าย ๆ การทำงานกับบริการจะสะดวกและสบาย หากคุณจำเป็นต้องดำเนินการ ไฟล์ใหญ่เป็นที่พึงปรารถนาที่จะดาวน์โหลดและติดตั้งแบบพิเศษ ซอฟต์แวร์หรืออดใจรอและเตรียมพร้อมสำหรับการหยุดไซต์อย่างต่อเนื่อง
วิธีที่ 3: โฟเตอร์
ไซต์ฟรีที่สะดวก ใช้งานได้ และที่สำคัญที่สุดสำหรับการทำงานกับรูปภาพในรูปแบบ PNG Fotor ช่วยให้คุณสามารถครอบตัด หมุน เพิ่มเอฟเฟกต์ ใช้เครื่องมืออื่น ๆ มีการทดสอบการทำงานของทรัพยากรในไฟล์ขนาดต่างๆ และไม่พบปัญหาใดๆ ไซต์นี้ได้รับการแปลเป็นภาษารัสเซีย ในการตั้งค่า คุณสามารถเลือกภาษาอื่นสำหรับอินเทอร์เฟซตัวแก้ไขได้หากจำเป็น
การเข้าถึง คุณลักษณะเพิ่มเติมมีให้สำหรับผู้ใช้หลังจากซื้อบัญชี PRO เท่านั้น
Fotor เป็นเครื่องมือที่ทรงพลังสำหรับการทำงานกับ PNG: นอกเหนือจากชุดของฟังก์ชันพื้นฐานแล้ว ยังมีเอฟเฟกต์เพิ่มเติมมากมายที่จะทำให้ผู้ใช้มีความต้องการมากที่สุด
โปรแกรมแก้ไขรูปภาพออนไลน์ใช้งานง่าย ไม่จำเป็นต้องติดตั้งบนคอมพิวเตอร์ เนื่องจากสามารถเข้าถึงได้แม้จะมี อุปกรณ์โทรศัพท์. ตัวแก้ไขที่จะใช้ขึ้นอยู่กับคุณ
สิ่งสำคัญคือการระบุรูปภาพในคอมพิวเตอร์หรือโทรศัพท์ของคุณ เลือกสีที่คุณต้องการเปลี่ยน กดปุ่ม OK ที่ด้านล่างของหน้า รอสองสามวินาทีแล้วดาวน์โหลดผลลัพธ์ที่เสร็จสมบูรณ์
ภาพถ่ายของดอกกุหลาบที่ไม่มีการเปลี่ยนแปลงและถูกแทนที่ด้วยสีชมพู: สีม่วง, สีฟ้า, สีฟ้าคราม, สีเขียวและ สีเหลือง:
มีการใช้การตั้งค่าต่อไปนี้เพื่อสร้างตัวอย่างข้างต้น: " สีทดแทน" - "สีชมพู", " สีที่ต้องการเปลี่ยน" - "สีม่วง" (สำหรับการประมวลผลถัดไป "สีน้ำเงิน" เป็นต้น), " ความเข้มของการเปลี่ยนสี" - "45".
หากทุกอย่างกลายเป็นสีเดียว ถูกแทนที่มากเกินไป หรือสีอื่นๆ ได้รับผลกระทบ คุณต้องลด "ความเข้มของการเปลี่ยนสี" ในทางกลับกัน หากมองไม่เห็นการเปลี่ยนแปลงหรือสีไม่ได้ถูกแทนที่อย่างสมบูรณ์ คุณต้องเพิ่ม "ความเข้มของการเปลี่ยนสี" และตรวจสอบให้แน่ใจว่าคุณได้ระบุสีอย่างถูกต้องและไม่สับสน เช่น สีแดงกับสีชมพู สำหรับข้อมูลเพิ่มเติม ข้อบ่งชี้ที่แน่นอนสีสามารถใช้รูปแบบ HEX สำหรับรูปภาพต่างๆ การตั้งค่าอาจแตกต่างกัน ขึ้นอยู่กับทั้งสีและขนาดเป็นพิกเซล
โปรดทราบว่าคุณไม่สามารถแทนที่ได้ ดำ เทา หรือ สีขาว ในบางส่วน สีอิ่มตัวแต่คุณสามารถแทนที่สีอิ่มตัวด้วยสีเกือบขาว ดำ หรือเทา พูดง่ายๆ ก็คือ คุณสามารถแทนที่สีรุ้งสีใดก็ได้หรือใกล้เคียงกับสีที่มีอยู่ในรายการแบบเลื่อนลงในการตั้งค่า เหตุผลนี้คืออัลกอริธึมการเปลี่ยนสีเกี่ยวข้องกับการเปลี่ยนโทนสี ซึ่งไม่ส่งผลต่อภาพโทนสีเทาหรือขาวดำ หากคุณต้องการประมวลผลภาพขนาดใหญ่กว่า 14 เมกะพิกเซล (≈4592x3048) ให้ส่งไปยังกล่องจดหมายพร้อมการตั้งค่าที่คุณต้องการ - จะดำเนินการฟรีภายในหนึ่งวัน
ภาพต้นฉบับไม่มีการเปลี่ยนแปลงแต่อย่างใด คุณจะได้รับภาพที่ประมวลผลอื่น
ที่จริงมี หลายวิธีในการเปลี่ยนสีของวัตถุใน Photoshop. ก่อนหน้านี้เราได้ดูวิธีการทำเช่นนี้แล้วและยังได้เรียนรู้วิธีเปลี่ยนสีผมใน Photoshop ด้วย
นี่ไม่ใช่วิธีการทั้งหมด วันนี้ฉันจะแสดงวิธีง่ายๆ สองวิธี และในบทความต่อๆ ไป ฉันจะพูดถึงวิธีการอีกสองสามวิธีโดยใช้เลเยอร์การปรับแต่งอื่นๆ
วิธีที่ 1
อธิบายแอปพลิเคชันโดยสังเขป วิธีนี้. เปิดภาพและสร้าง เลเยอร์ใหม่(ฉันจำเทคนิคทั้งหมดได้)
จากนั้นเปลี่ยนโหมดการผสมของเลเยอร์นี้โดยเลือก Hue จากรายการแบบเลื่อนลงที่ด้านบนของจานสีเลเยอร์ (อยู่ที่ด้านล่างของรายการ)
หลังจากนั้น ให้เลือกโดยกดปุ่ม B คลิกที่ตัวบ่งชี้สีพื้นหน้า ในกล่องโต้ตอบจานสีที่ปรากฏขึ้น เลือกสีและคลิกที่ปุ่ม OK เมื่อเลือกเลเยอร์ใหม่แล้ว ให้ระบายสีที่ด้านบนของวัตถุ
หากคุณระบายสีมากเกินไป คุณสามารถเลือกเครื่องมือยางลบชั่วคราวได้โดยการกดปุ่ม E ค้างไว้ และคุณสามารถป้องกันสถานการณ์ดังกล่าวล่วงหน้าได้โดยเพิ่มเลเยอร์มาสก์ให้กับเลเยอร์ใหม่และซ่อนส่วนที่ไม่ต้องการเปลี่ยนด้วยสีดำ
บันทึก
หากพื้นที่ที่จะทาสีใหม่ล้อมรอบด้วยสีดำ สีขาว และสีเทา คุณสามารถทาสีทับได้อย่างปลอดภัย และสีเหล่านั้นจะไม่เปลี่ยนแปลงเลย เนื่องจากในโหมดการผสมสี พื้นที่ที่เต็มไปด้วยสีจะมีผลเฉพาะพื้นที่ของเลเยอร์พื้นฐานที่มีสีอยู่แล้วเท่านั้น
วิธีที่ 2
จำคำสั่งเมนู? คำสั่งเมนูที่คล้ายกัน เปลี่ยนสีสามารถใช้เพื่อเน้นสีหนึ่งและแทนที่ด้วยสีอื่น คำสั่งนี้ทำงานได้ดีมากหากสีที่จะเปลี่ยนมีความสม่ำเสมอไม่มากก็น้อยและกระจุกตัวอยู่ในบางบริเวณ เช่น ตัวรถในภาพด้านบน
การเลือกคำสั่งจากเมนู รูปภาพ - แก้ไข - เปลี่ยนสีคุณจะเห็นกล่องโต้ตอบที่มีชื่อเดียวกัน
เครื่องมือนี้เลือกเครื่องมือ Eyedropper ไว้แล้ว ดังนั้นให้คลิกที่สีในภาพที่คุณต้องการแทนที่ มันจะปรากฏในตารางที่มีคำจารึก สีในกลุ่มของการควบคุม การเลือกที่ด้านบนของกล่องโต้ตอบ
ในกลุ่มของการควบคุม เปลี่ยนในส่วนล่างของกล่องโต้ตอบ คลิกที่สี่เหลี่ยมที่อยู่เหนือคำจารึก ผลลัพธ์เพื่อเลือกเฉดสีใหม่ เมื่อคุณคลิกที่ปุ่มตกลง หากคุณต้องการแก้ไขเฉดสีที่เลือก คุณสามารถใช้แถบเลื่อนได้ โทนสี, ความอิ่มตัวและ ความสว่าง(พบในกลุ่มควบคุมการเลือกเช่นกัน) นี่คือสิ่งที่เกิดขึ้น:
โปรดทราบว่านอกจากปิเปตธรรมดาแล้ว ยังมีปิเปตที่มีเครื่องหมาย "+" (บวก) และ "-" (ลบ) เล็กๆ อยู่ใกล้ๆ ด้วย ใช้เพื่อขยาย/จำกัดช่วงของเฉดสีที่คุณต้องการเปลี่ยน
อย่างที่คุณเห็น ฉันกินมากเกินไปเล็กน้อย และล้อรถของฉันก็เปลี่ยนเป็นสีม่วงด้วย สิ่งนี้ชี้ให้เห็นว่า ทางนี้อาจไม่เป็นประโยชน์เสมอไป
สังเกตเห็นข้อผิดพลาดในข้อความ - เลือกแล้วกด Ctrl + Enter ขอบคุณ!
กำลังโหลด...