ฟังก์ชัน rgb() ใช้สำหรับกำหนดค่าสี RGB พารามิเตอร์ของฟังก์ชันตั้งค่าความเข้มของสีเป็นเปอร์เซ็นต์หรือค่าตั้งแต่ 0 ถึง 255
ตัวอย่างที่ 1: ใช้ค่า 0-255
<!DOCTYPE html> <html> <head> <style> div { text-align: justify; text-justify: inter-word; color: rgb(213,33,33); background-color: rgb(211,211,211); font-size: 1.1em; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text... </div> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ใช้กับ CSS Grid
<!DOCTYPE html> <html> <head> <style> .demo { grid-area: newArea; font-size: xx-large; } .item3 { font-size: small; } .item4 { font-size: medium; } .item5 { font-size: x-large; } .grid-container { display: grid; grid-template-areas: 'newArea newArea . . .' 'newArea newArea . . .'; grid-gap: 5px; background-color: rgb(0,255,255); padding: 5px; } .grid-container > div { background-color: rgb(255, 50, 80); text-align: center; padding: 5px 0; } </style> </head> <body> <h1>Heading One</h1> <p>Set some random numbers</p> <div class="grid-container"> <div class="demo">250</div> <div class="item2">120</div> <div class="item3">333</div> <div class="item4">298</div> <div class="item5">645</div> <div class="item6">543</div> <div class="item7">555</div> </div> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
rgb(red, green, blue) rgb(red%, green%, blue%)
คำอธิบาย
- red, green, blue - ค่าตัวเลข 0-255 หรือเปอร์เซ็นต์ 0%-100%
- rgb(255,0,0) = แดง, rgb(0,255,0) = เขียว, rgb(0,0,255) = น้ำเงิน
- rgb(0,0,0) = ดำ, rgb(255,255,255) = ขาว
หมายเหตุ: เวอร์ชันใหม่รองรับรูปแบบ rgb(255 0 0) (เว้นวรรคแทนคอมมา) และ rgb(255 0 0 / 0.5) สำหรับความทึบแสง (alpha)
