แทนที่สีขาวด้วย Photoshop แบบโปร่งใส วิธีทำให้สีโปร่งใสใน Photoshop ตั้งค่าความโปร่งใสสำหรับพื้นหลัง css

สิ่งสำคัญคือการระบุรูปภาพในคอมพิวเตอร์หรือโทรศัพท์ของคุณ จากนั้นคลิกปุ่มตกลงที่ด้านล่างของหน้านี้ ตามค่าเริ่มต้น พื้นหลังธรรมดาของรูปภาพจะถูกแทนที่ด้วยพื้นหลังโปร่งใส สีพื้นหลังของภาพต้นฉบับจะถูกกำหนดโดยอัตโนมัติ คุณเพียงแค่ต้องระบุในการตั้งค่าว่าจะแทนที่ด้วยสีใด พารามิเตอร์หลักที่ส่งผลต่อคุณภาพของการเปลี่ยนคือ "ความเข้มของการเปลี่ยน" และอาจแตกต่างกันไปในแต่ละภาพ

ตัวอย่างภาพถ่ายดอกกุหลาบสีชมพูที่ไม่มีการเปลี่ยนแปลงและหลังจากเปลี่ยนพื้นหลังทึบเป็นโปร่งใส สีขาว และสีเขียว:


ตัวอย่างแรกด้วยดอกกุหลาบบนพื้นหลังโปร่งใสทำด้วยการตั้งค่าต่อไปนี้:
1) ความเข้มของการแทนที่ - 38;
2) ปรับขอบให้เรียบ - 5;
3) แทนที่พื้นหลังทึบด้วยพื้นหลังโปร่งใส
4) การครอบตัด (<0) или Добавление (>0) ตามขอบ - "-70";
5) สลับ - ปิดใช้งาน (ไม่ได้ตรวจสอบ)

สำหรับการสร้าง ตัวอย่างที่สองสำหรับพื้นหลังสีขาว จะใช้การตั้งค่าเดียวกันกับในตัวอย่างแรก ยกเว้นพารามิเตอร์: "แทนที่พื้นหลังธรรมดาด้วย" - สีขาว ใน ตัวอย่างที่สามการตั้งค่าจะใช้พื้นหลังสีเขียวเช่นเดียวกับในตัวอย่างแรก ยกเว้นพารามิเตอร์: "สีในรูปแบบฐานสิบหก" - #245a2d

ภาพต้นฉบับไม่มีการเปลี่ยนแปลงแต่อย่างใด คุณจะได้รับรูปภาพที่ประมวลผลแล้วพร้อมพื้นหลังโปร่งใสหรือพื้นหลังที่คุณระบุ

1) ระบุรูปภาพในรูปแบบ BMP, GIF, JPEG, PNG, TIFF:

2) การตั้งค่าสำหรับเปลี่ยนพื้นหลังทึบ
อัตราการเปลี่ยน: (1-100)

ขอบเรียบ: (0-100) แทนที่พื้นหลังธรรมดาด้วย: โปร่งใส (PNG-24 เท่านั้น) แดง ชมพู ม่วง น้ำเงิน ฟ้าเทอร์ควอยซ์ ท้องฟ้ามะนาว เขียว เหลือง ส้ม ดำ เทา ขาว หรือสีฐานสิบหก: เปิดจานครอบตัด (<0) или Добавление (>0) ที่ขอบ: (จาก -100 ถึง 100)
(ความเข้มสำหรับการครอบตัดเพิ่มเติมหรือเพิ่มพิกเซลรอบส่วนที่เลือกบนพื้นหลังโปร่งใส)สลับการเลือก (แทนพื้นหลัง แทนที่เบื้องหน้า)

ในบางกรณี เช่น เมื่อออกแบบไซต์ คุณอาจพบสถานการณ์ที่พื้นหลังของรูปภาพไม่ตรงกับสีของไซต์เองในทางใดทางหนึ่ง วิธีแก้ไขที่ชัดเจนคือการทำให้พื้นหลังนี้โปร่งใส

คุณจะต้องการ

คำแนะนำ

  • เปิดภาพที่ต้องการใน Adobe Photoshop (รายการเมนู “ไฟล์” (ไฟล์) -> “เปิด” (เปิด) หรือปุ่มลัด Ctrl + O) คลิกรายการเมนู "เลือก" (เลือก) -\u003e "ช่วงสี" (ช่วงสี) หน้าต่างช่วงสีจะปรากฏขึ้น
  • ค้นหารายการ "เลือก" ซึ่งอยู่ที่ด้านบนสุดของหน้าต่าง คลิกที่มัน ในเมนูที่เปิดขึ้น คุณสามารถเลือกกลุ่มสีหรือโทน ซึ่งจะทำให้โปร่งใสได้ในภายหลัง เหล่านั้น. เฉพาะสีแดง เฉพาะสีเขียว น้ำเงิน หรือเฉพาะเสียงกลาง เงา ฯลฯ หากคุณต้องการชี้เพื่อเลือกสีใดสีหนึ่ง ให้ระบุในย่อหน้านี้ว่า "ตามตัวอย่าง"
  • ค้นหารายการ "กระจาย" (ความคลุมเครือ) - คุณสามารถขยายช่วงของสีที่เลือกได้ ด้านล่างนี้คือรายการ "พื้นที่ที่เลือก" และ "รูปภาพ" หากคุณเลือกอันแรก พื้นที่ที่เลือกจะแสดงในหน้าต่างแสดงตัวอย่างของโปรแกรม หากเป็นอย่างที่สอง ภาพจะแสดงอย่างครบถ้วน
  • ในส่วนด้านขวาของหน้าต่างมีปุ่มสามปุ่มพร้อมรูปปิเปต ในตอนแรกมีเพียงปิเปตตัวที่สอง - ปิเปตที่มีเครื่องหมายบวกและตัวที่สามมีเครื่องหมายลบ คลิกที่อันแรกแล้วคลิกในหน้าต่างแสดงตัวอย่างหรือบนเอกสารด้วยสีที่คุณต้องการทำให้โปร่งใส เลือก "พื้นที่ที่เลือก" เพื่อดูว่าส่วนใดของภาพถูกเลือก
  • หากคุณต้องการเพิ่มสีอื่นให้กับสีที่เลือก ให้คลิกที่ "ปิเปต +" จากนั้นคลิกที่สีนี้ หากคุณลดให้ดำเนินการในลักษณะเดียวกันโดยใช้ "ปิเปต-" เท่านั้น หลังจากเลือกสี (หรือสี) ที่ต้องการแล้ว ให้คลิก ตกลง อย่างที่คุณเห็น สีที่เลือกจะถูกเน้นในเอกสาร
  • ในรายการเลเยอร์ (หากไม่มี ให้กด F7) คลิก คลิกขวาคลิกที่พื้นหลังในเมนูที่ปรากฏขึ้น เลือก "จากพื้นหลัง" และในหน้าต่างถัดไป - ตกลงทันที พื้นหลังจะกลายเป็นเลเยอร์ กด Delete บนแป้นพิมพ์ของคุณ พื้นที่ที่เลือกจะกลายเป็นโปร่งใส

    • วิธีตั้งค่าสีโปร่งใสใน css ขณะนี้มี 3 วิธีในการทำเช่นนี้

    วิธีที่ 1 - ค่าโปร่งใส

    หากคุณตั้งค่าข้อความหรือสีพื้นหลังเป็น โปร่งใส สีจะโปร่งใสทั้งหมด กล่าวคือ มองไม่เห็น ตัวอย่าง:

    สี:โปร่งใส;

    ข้อความดังกล่าวจะไม่ปรากฏบนเพจ

    วิธีที่ 2 - โหมดสี rgba

    และนี่คือนวัตกรรม css3 แล้ว ก่อนหน้านี้ไม่มีโหมดดังกล่าวในการพัฒนาเว็บ มีเพียง rgb แน่นอนคุณรู้วิธีเขียนสีในรูปแบบนี้ ในการทำเช่นนี้คุณต้องระบุค่าสามค่าในวงเล็บตั้งแต่ 0 ถึง 255 เพื่อระบุความอิ่มตัวของสีหลักหนึ่งในสามสี (แดง, เขียว, น้ำเงิน) ตัวอย่างเช่น:

    พื้นหลัง: rgb(230, 121, 156);

    รูปแบบ rgba ไม่แตกต่างกัน เพียงเพิ่มค่าที่สี่ - ระดับความโปร่งใสขององค์ประกอบตั้งแต่ 0 ถึง 1 โดยทั่วไป รูปแบบสัญกรณ์นี้ส่วนใหญ่จะใช้เพื่อตั้งค่าสีกึ่งโปร่งใส และไม่โปร่งใสทั้งหมด เพื่อให้เกิดความโปร่งใสอย่างสมบูรณ์ คุณต้องเขียน 0 เป็นค่าที่สี่เท่านั้น

    พื้นหลัง: rgba (0, 0, 0, 0);

    ในกรณีนี้ ตัวเลข 3 หลักที่เหลือจะไม่มีบทบาทพิเศษ

    สามารถตั้งค่าสีโปร่งแสงได้หากตั้งค่าพารามิเตอร์ที่สี่เป็นค่าตั้งแต่ 0.01 ถึง 0.99 O เขียนไปแล้วเล็กน้อยเกี่ยวกับการตั้งค่าความโปร่งแสงสำหรับพื้นหลังใน คุณสามารถอ่านได้หากคุณสนใจ

    วิธีที่ 3 - ความทึบ

    คุณสมบัติอื่นจากเทคโนโลยี css3 แต่ฉันต้องการเตือนคุณทันทีว่ามันทำงานแตกต่างกันเล็กน้อย ด้วยความทึบ ความโปร่งใสจะถูกตั้งค่าเป็นบล็อกทั้งหมดที่ใช้ ดังนั้นความสามารถในการอ่านข้อความและการรับรู้ภาพจึงลดลง ดังนั้นฉันจึงเห็นประเด็นในการใช้คุณสมบัติเฉพาะสำหรับบล็อกที่ไม่มีข้อความและข้อมูลอื่น ๆ สามารถตั้งค่าได้ตั้งแต่ 0 ถึง 1 เช่นเดียวกับในกรณีของพารามิเตอร์ที่สี่เมื่อระบุสีในรูปแบบ rgba

    โดยทั่วไปเปิด ช่วงเวลานี้นี่คือวิธีทั้งหมดที่ฉันรู้เกี่ยวกับการตั้งค่าสีโปร่งใสใน css เหตุใดจึงจำเป็นเป็นอีกคำถามหนึ่ง ผ่าน พื้นหลังโปร่งใสคุณสามารถเห็นสิ่งที่อยู่ข้างใต้ บางครั้งก็ต้องทำแบบนั้นโดยการออกแบบ โดยทั่วไปแล้วเทคนิคที่มีความโปร่งแสงเป็นเรื่องธรรมดามากในปัจจุบัน

    พื้นหลังโปร่งใส (พื้นหลัง)

    อย่างที่คุณทราบ พื้นหลังเป็นคุณสมบัติ CSS ที่ให้คุณตั้งค่าสีพื้นหลังหรืออัปโหลดรูปภาพเพื่อใช้เป็นพื้นหลัง

    ตั้งค่าความโปร่งใสสำหรับพื้นหลัง css

    ดังนั้น ทั้งหมดนี้ทำได้ง่ายมากด้วยรูปแบบการบันทึกสีเช่น rgba . หากคุณกำลังทำงานร่วมกับ บรรณาธิการกราฟิกคุณอาจทราบแล้วว่าโหมดสี rgb หมายถึง: สัดส่วนของสีแดง (สีแดง) สัดส่วนของสีเขียว (สีเขียว) และสีน้ำเงิน (สีน้ำเงิน) ดังนั้น rgba จึงเกือบจะเหมือนกัน มีการเพิ่มพารามิเตอร์อีกเพียงตัวเดียว - ความโปร่งใส มันเขียนดังนี้:

    สีพื้นหลัง: rgba(173, 57, 22, 0.5)

    ก่อนอื่น เราระบุอย่างชัดเจนว่าเรากำลังตั้งค่าสีในโหมด rgba จากนั้นเราจะระบุค่าความอิ่มตัวของสีหลักสามสีตั้งแต่ 0 ถึง 255 โดยที่ 255 คือค่าความอิ่มตัวสูงสุด พารามิเตอร์ที่สี่คือความโปร่งใสของเรา ที่นี่เขียนค่าจาก 0 ถึงหนึ่ง 1 คือองค์ประกอบที่ทึบเต็มที่ และ 0 คือองค์ประกอบที่โปร่งใสเต็มที่ ดังนั้นหากคุณตั้งค่าเป็น 0 สีพื้นหลังจะไม่ปรากฏให้เห็นเลย

    ตอนนี้คุณรู้วิธีตั้งค่าความโปร่งใสให้กับคุณสมบัติพื้นหลังใน css แล้ว ในการทำเช่นนี้คุณต้องใช้โหมดสี rgba นอกจากนี้ยังมีคุณสมบัติความทึบ แต่จะใช้กับองค์ประกอบทั้งหมดโดยรวม นั่นคือ เมื่อใช้ความทึบ ความโปร่งใสยังสามารถใช้กับข้อความ ซึ่งจะทำให้อ่านไม่ได้

    ตัวอย่างพื้นหลังโปร่งใส

    ข้อดี พื้นหลังโปร่งแสงแสดงตัวอย่างได้ง่าย ตัวอย่างเช่น เรามีพื้นหลังของหน้าทั่วไป นี่คือลักษณะของบล็อกหากได้รับสีดำทึบ:

    และตอนนี้เรามาตั้งค่าสีดำเดียวกันกับบล็อก แต่ระบุโดยใช้รูปแบบสี rgba โดยระบุค่าสุดท้ายเป็น 0.7 เป็นต้น มันจะกลายเป็นดังนี้:

    ตอนนี้พื้นหลังของบล็อกโปร่งแสงและมองเห็นภาพพื้นหลังได้ รูปภาพและพื้นหลังนี้ใช้เพื่อเป็นภาพประกอบเท่านั้น ตามที่คุณเข้าใจ ความโปร่งใสของพื้นหลังใน css มีประโยชน์เมื่อคุณต้องการพื้นหลังขององค์ประกอบที่ซ้อนกันเพื่อแสดงผ่านโดยไม่บดบังพื้นหลังอื่น ๆ ที่อยู่ในเลเยอร์อื่น

    การตั้งค่าสีเองโดยใช้ rgba ไม่ใช่เรื่องยาก ดังที่ได้กล่าวไปแล้ว ตัวอักษรสามตัวแรกหมายถึงสีหลักสามสี: สีแดง สีเขียว และสีน้ำเงิน หรือมากกว่าที่ใช้ร่วมกัน (จาก 0 ถึง 255) การเขียนค่าต่างๆ จะทำให้คุณได้สีต่างๆ นับล้านสี และความโปร่งแสงจะช่วยให้คุณสร้างสีได้มากขึ้น เอฟเฟกต์ที่สวยงามสำหรับไซต์ หากจำเป็น



    กำลังโหลด...
    สูงสุด