CSS สี
CSS รองรับชื่อสีมากกว่า 140 ชื่อ ค่า HEX ค่า RGB ค่า RGBA ค่า HSL ค่า HSLA และความทึบ
RGBA สี
ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มีช่องอัลฟา - ซึ่งระบุความทึบของสี
ค่าสี RGBA ระบุด้วย: rgba(แดง เขียว น้ำเงิน อัลฟ่า) พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
ตัวอย่างต่อไปนี้กำหนดสี RGBA ที่แตกต่างกัน:
ตัวอย่าง
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
HSL สี
HSL ย่อมาจาก Hue, Saturation และ Lightness
ค่าสี HSL ถูกระบุด้วย: hsl(hue, saturation, lightness)
- Hue คือระดับของวงล้อสี (ตั้งแต่ 0 ถึง 360):
- 0 (หรือ 360) เป็นสีแดง
- 120 เป็นสีเขียว
- 240 เป็นสีฟ้า
- ความอิ่มตัวเป็นค่าเปอร์เซ็นต์: 100% เป็นสีเต็ม
- ความสว่างยังเป็นเปอร์เซ็นต์ 0% คือสีเข้ม (สีดำ) และ 100% คือสีขาว
ตัวอย่างต่อไปนี้กำหนดสี HSL ที่แตกต่างกัน:
ตัวอย่าง
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA สี
ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL ที่มีช่องอัลฟา - ซึ่งระบุความทึบของสี
ค่าสี HSLA ระบุด้วย: hsla(hue, saturation, lightness, alpha) โดยที่พารามิเตอร์ alpha กำหนดความทึบ พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
ตัวอย่างต่อไปนี้กำหนดสี HSLA ที่แตกต่างกัน:
ตัวอย่าง
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
ความทึบ
คุณสมบัติ CSS opacity
ตั้งค่าความทึบสำหรับองค์ประกอบทั้งหมด (ทั้งสีพื้นหลังและข้อความจะเป็นแบบทึบ/โปร่งใส)
ค่าopacity
คุณสมบัติต้องเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
โปรดสังเกตว่าข้อความด้านบนจะโปร่งใส/ทึบแสงด้วย!
ตัวอย่างต่อไปนี้แสดงองค์ประกอบต่างๆ ที่มีความทึบ:
ตัวอย่าง
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */