ความทึบและความโปร่งใสแบบ RGBA

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

ข้อควรระวังสำคัญคือ opacity มีผลต่อลำดับชั้นขององค์ประกอบทั้งหมด ข้อความ ภาพ และองค์ประกอบลูกภายในองค์ประกอบที่มี opacity: 0.5 จะโปร่งใส 50% ทั้งหมด คุณไม่สามารถทำให้องค์ประกอบลูกทึบแสงกว่าระดับขององค์ประกอบแม่ได้

หากต้องการทำให้เฉพาะ สีพื้นหลัง โปร่งใสโดยไม่ส่งผลต่อข้อความหรือองค์ประกอบลูก ให้ใช้ rgba() แทน opacity:

ให้จดจำด้วยแนวคิดนี้:

• opacity: 0.5 — องค์ประกอบทั้งหมดและองค์ประกอบลูกจะโปร่งใส
• rgba(r,g,b,0.5) — มีเพียงค่าสีที่โปร่งใส องค์ประกอบลูกไม่ได้รับผลกระทบ

หลักการเดียวกันนี้ใช้กับ hsla() อาร์กิวเมนต์ตัวที่สี่คือช่องอัลฟา ซึ่งมีค่าตั้งแต่ 0–1:

CSS สมัยใหม่อนุญาตให้ใช้เครื่องหมายทับคั่นค่าอัลฟาใน rgb() และ hsl() โดยไม่ต้องใช้รูปแบบชื่อที่ลงท้ายด้วยตัวอักษร a:

ทั้งสามวิธีซ่อนองค์ประกอบ แต่ทำงานแตกต่างกัน:

• opacity: 0 — มองไม่เห็น แต่ยังใช้พื้นที่และคลิกได้
• visibility: hidden — มองไม่เห็น ยังคงใช้พื้นที่ แต่คลิกไม่ได้
• display: none — ถูกนำออกจากเค้าโครงทั้งหมด

เนื่องจาก opacity ถูกประกอบภาพบน GPU จึงเป็นหนึ่งในคุณสมบัติ CSS ที่ใช้ทรัพยากรน้อยที่สุดเมื่อทำภาพเคลื่อนไหว เอฟเฟกต์ค่อย ๆ ปรากฏหรือจางหายควรใช้การเปลี่ยนค่า opacity แทนการเปลี่ยนสีพื้นหลังเสมอ

หากต้องการให้พื้นหลังขององค์ประกอบโปร่งแสง แต่ยังคงอ่านข้อความได้ชัดเจน ให้ใช้ rgba() กับ background-color:

ใช้ RGBA ใน border-color และ box-shadow เพื่อสร้างเอฟเฟกต์โปร่งใสที่ดูละเอียดอ่อน:

ข้อความที่มีความทึบแสงต่ำจะอ่านได้ยากขึ้น และอาจไม่ผ่านข้อกำหนดอัตราส่วนความเปรียบต่างของสีตาม WCAG ควรตรวจสอบอัตราส่วนความเปรียบต่างทุกครั้งเมื่อใช้ความโปร่งใสกับข้อความ และตรวจสอบให้แน่ใจว่าข้อความปกติมีอัตราส่วนอย่างน้อย 4.5:1

องค์ประกอบหนึ่งมีค่า opacity: 0.3 ข้อความภายในองค์ประกอบนั้นจะเป็นอย่างไร

opacity ทำให้องค์ประกอบทั้งหมดและองค์ประกอบลูกโปร่งใส ให้ใช้ rgba() หรือ hsla() สำหรับสีโปร่งใสโดยไม่ส่งผลต่อองค์ประกอบลูก การเปลี่ยนค่า opacity ใช้การเร่งด้วย GPU และทำงานได้มีประสิทธิภาพ ควรตรวจสอบอัตราส่วนความเปรียบต่างเสมอเมื่อใช้ความโปร่งใสกับข้อความ