RGBA เป็นสี CSS ที่สามารถตั้งค่าสีและความโปร่งใสได้
ด้านล่างเป็นสีขาวโดยใช้ rgba() เพื่อตั้งค่าความโปร่งใส 50%
พี {
สี: RGBA(255, 255, 255, 0.5);
-
RGBA เป็นส่วนเสริมของโมเดลสี RGB ตัวย่อนี้ย่อมาจากตัวอักษรตัวแรกของแม่สีทั้งสามสี ได้แก่ สีแดง เขียว และน้ำเงิน และค่าอัลฟ่าแสดงถึงความโปร่งใส/ความทึบของสี
ไวยากรณ์ RGBA
รูปแบบของการแสดงสี RGBA คือ:
RGBA (แดง, เขียว, น้ำเงิน, อัลฟ่า)
ค่าสามค่าแรก (แดง เขียว และน้ำเงิน) มีตั้งแต่จำนวนเต็มระหว่าง 0 ถึง 255 หรือเปอร์เซ็นต์ระหว่าง 0% ถึง 100% ค่าเหล่านี้อธิบายจำนวนแม่สีสามสีคือสีแดง เขียว และน้ำเงินในสีที่ต้องการ
หากคุณต้องการตั้งค่าสีแดงล้วน ให้ตั้งค่าพารามิเตอร์สีแดงเป็นเต็ม ซึ่งก็คือ 255 และตั้งค่าพารามิเตอร์สีเขียวและสีน้ำเงินเป็น 0
สีพื้นหลัง: rgba (255, 0, 0, 1);
ผลลัพธ์:
เปอร์เซ็นต์ยังสามารถใช้ได้:
สีพื้นหลัง: RGBA (100%, 0%, 0%, 1);
ผลลัพธ์:
ค่าที่สี่ อัลฟา ระบุความโปร่งใส/ความทึบของสีและช่วงตั้งแต่ 0.0 ถึง 1.0
ตัวอย่างต่อไปนี้เป็นสีเหลืองที่มีความโปร่งใส 50%:
สี: RGBA(255, 242, 0, 0.5);
ความโปร่งแสงของ CSS เข้ากันได้กับ Firefox, IE และ Chrome เวอร์ชันเบราว์เซอร์ปัจจุบันค่อนข้างสูง คุณสามารถใช้มันในโครงการของคุณได้