ฟังก์ชัน rgb() ของ CSS

การประกาศและการใช้งาน

CSS rgb() ฟังก์ชันโดยใช้โมเดลสี Red-Green-Blue (RGB) โดยยังสามารถเพิ่มช่องทางความโปร่งใส (แสดงความโปร่งใสของสี) อีกด้วย。

RGB ค่าสีถูกกำหนดโดย rgb(red green blue) กำหนดแนวทาง แต่ละปรากฏการณ์นี้กำหนดความรุนแรงของสี ซึ่งอาจเป็นตัวเลขเต็มที่อยู่ในขอบเขต 0 ถึง 255 หรือสัญลักษณ์เปอร์เซ็นต์ที่อยู่ในขอบเขต 0% ถึง 100%。

เช่น rgb(0 0 255) จะแสดงเป็นสีน้ำเงิน เพราะค่าสีน้ำเงินถูกตั้งเป็นค่าสูงสุด (255) และค่าอื่นถูกตั้งเป็น 0。

แจ้งเตือน:rgba() ฟังก์ชันเป็น rgb() ชื่อเล่นของฟังก์ชัน แนะนำใช้ rgb() ฟังก์ชัน

ตัวอย่าง

กำหนดสี RGB(A) ต่างกัน

#p1 {background-color:rgb(255 0 0);} /* สีแดง */
#p2 {background-color:rgb(0 255 0);} /* สีเขียว */
#p3 {background-color:rgb(0 0 255);} /* สีน้ำเงิน */
#p4 {background-color:rgb(192 192 192);} /* สีเทา */
#p5 {background-color:rgb(255 255 0);} /* สีเหลือง */
#p6 {background-color:rgb(255 0 255);} /* สีชาโรก */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* สีชาโรกที่มีความโปร่งใส */
#p8 {background-color:rgb(0 0 255 / 50%);} /* สีน้ำเงินที่มีความโปร่งใส */

ลองทดลองเอง

ภาษา CSS

การใช้งานภาษาตัวเลขอัตรานิยม

rgb(R G B / A)
ค่า เนื้อหา
R

จำเป็น (required). กำหนดความแข็งของสีสีแดง สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
G

จำเป็น (required). กำหนดความแข็งของสีสีเขียว สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
B

จำเป็น (required). กำหนดความแข็งของสีสีน้ำเงิน สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
/ A

เลือกใช้ (optional). หมายถึงค่าช่องความโปร่งใสของสี 0% (หรือ 0) หมายถึงสีแบบโปร่งใส 100% (หรือ 1) หมายถึงสีแบบไม่โปร่งใส

ยังสามารถใช้ none (หมายถึงไม่มีช่องความโปร่งใส) ได้เช่นกัน ค่าเริ่มต้นคือ 100%

การใช้งานภาษาตัวเลขเรlatıve

rgb(from color R G B / A)
ค่า เนื้อหา
from color

เริ่มต้นด้วยคำว่า from ตามด้วยค่าสีที่แสดงสีต้นทาง

นี่เป็นสีต้นทางที่มีสีส่วนบุคคล
R

จำเป็น (required). กำหนดความแข็งของสีสีแดง สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
G

จำเป็น (required). กำหนดความแข็งของสีสีเขียว สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
B

จำเป็น (required). กำหนดความแข็งของสีสีน้ำเงิน สามารถเป็นตัวเลขเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์ระหว่าง 0% ถึง 100%

ยังสามารถใช้ none (หมายถึง 0%) ได้เช่นกัน
/ A

เลือกใช้ (optional). หมายถึงค่าช่องความโปร่งใสของสี 0% (หรือ 0) หมายถึงสีแบบโปร่งใส 100% (หรือ 1) หมายถึงสีแบบไม่โปร่งใส

ยังสามารถใช้ none (หมายถึงไม่มีช่องความโปร่งใส) ได้เช่นกัน ค่าเริ่มต้นคือ 100%

รายละเอียดเทคนิค

เวอร์ชั่น： CSS2

การสนับสนุนบราวเซอร์

ตัวเลขในตารางแสดงว่าเวอร์ชั่นบราวเซอร์ที่สนับสนุนฟังก์ชันนี้อย่างสมบูรณ์

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
rgb() ที่มีตัวอักษรที่เปิดโชว์ความโปร่งใส
65 79 52 12.1 52
จำนวนที่แยกด้วยช่องว่าง
65 79 52 12.1 52