Opacity Property
ควบคุมความโปร่งใส (Transparency) ค่า 0 ถึง 1
0= โปร่งใสสมบูรณ์ (Invisible)1= ปกติ (Fully Opaque)0.5= โปร่งใส 50%
img { opacity: 0.7; }
ข้อควรระวัง: สืบทอดไปยัง Child Elements
opacity ส่งผลต่อ **ทุก Child Elements** ภายใน ถ้าตั้ง Parent opacity: 0.5 → ลูกทุกตัวจะโปร่งใส 50% รวมถึงข้อความ
ตัวอย่าง: โปร่งใสเมื่อ Hover
.img { opacity: 0.5; }
.img:hover { opacity: 1; }
ปกติโปร่งใส 50% → Hover แล้วชัดเจน 100%
ตัวเลือกอื่น: RGBA Color (แยก Background จาก Content)
ใช้ rgba(R, G, B, Alpha) สำหรับ Background เท่านั้น → Child Elements **ไม่ได้รับผลกระทบ**
.box {
background: rgba(181, 101, 29, 0.3); /* 70% Transparent */
color: black; /* ข้อความยังคงชัดเจน */
}
เปรียบเทียบ
| วิธี | ผลต่อ Child Elements | ใช้เมื่อไหร่ |
|---|---|---|
opacity | สืบทอดไปทุก Child | ต้องการให้ทั้งกล่องและเนื้อหาโปร่งใสด้วยกัน |
rgba() background | เฉพาะ Background | ต้องการพื้นหลังโปร่งใส แต่ข้อความ/รูปภายในชัดเจน |
สรุป
opacity ใช้ง่าย แต่ส่งผลลูกด้วย ใช้ rgba() บน Background เมื่อต้องการแยกความโปร่งใสระหว่าง Container และ Content
