สี CSS3
CSS สนับสนุนชื่อสีฐานสิบหกและสี RGB
นอกจากนี้ยังแนะนำ CSS3:
- สี RGBA
- สี HSL
- สี HSLA
- ความทึบแสง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ค่าสี CSS3 / คุณสมบัติ
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| ความทึบแสง | 4.0 | 9.0 | 2.0 | 3.1 | 10.1 |
สี RGBA
ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มี alpha Channel - ซึ่งระบุความทึบแสงสำหรับสี
ค่าสี RGBA ถูกระบุด้วย: RGBA (สีแดง, สีเขียว, สีฟ้า, alpha ) alpha พารามิเตอร์เป็นตัวเลขระหว่าง 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 ยืนสำหรับสี, ความอิ่มตัวและความสว่าง
ค่าสี HSL ถูกระบุด้วย: HSL (สี, ความเข้มความสว่าง)
- เว้เป็นระดับบนวงล้อสี (0-360) A:
- 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 กับ alpha Channel - ซึ่งระบุความทึบแสงสำหรับสี
ค่าสี HSLA ถูกระบุด้วย: HSLA (สี, ความเข้มความสว่าง, alpha ) ที่ 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 */
ลองตัวเอง» ความทึบแสง
สถานที่ให้บริการ CSS3 ทึบชุดทึบสำหรับค่า RGB ที่ระบุ
ค่าของคุณสมบัติความทึบจะต้องเป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่)
ขอให้สังเกตว่าข้อความดังกล่าวข้างต้นยังจะมีสีขาวขุ่น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงค่า RGB ที่แตกต่างกับความทึบ:
ตัวอย่าง
#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 */
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»