CSS3 में RGBA कलर वैल्यूज

RGBA कलर वैल्यू

RGBA = Red, Green, Blue, Alpha। अल्फा रंग की अपारदर्शिता है यानी 0.0 और 1.0 के बीच की संख्या। यहाँ 1.0 पूरी तरह अपारदर्शी के लिए होगा।

सिंटैक्स:

rgba(red, green, blue, alpha)

पैरामीटर्स:

• Red, Green, Blue: 0-255 या 0%-100%
• Alpha: 0.0 (पूरी तरह पारदर्शी) से 1.0 (पूरी तरह अपारदर्शी)

उदाहरण: विभिन्न अल्फा मान

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: rgba(108, 111, 35, 0.6); }
#demo2 { background-color: rgba(108, 111, 35, 0.5); }
#demo3 { background-color: rgba(108, 111, 35, 0.4); }
#demo4 { background-color: rgba(108, 111, 35, 0.3); }
#demo5 { background-color: rgba(108, 111, 35, 0.2); }
#demo6 { background-color: rgba(108, 111, 35, 0.1); }
</style>
</head>
<body>
<h1>क्रिकेटर्स</h1>
<p id="demo1">डेविड वार्नर</p>
<p id="demo2">स्टीव स्मिथ</p>
<p id="demo3">मार्क वॉ</p>
<p id="demo4">स्टीव वॉ</p>
<p id="demo5">डेविड जॉनसन</p>
<p id="demo6">एंडी बिकेल</p>
</body>
</html>

आउटपुट

समान RGB रंग (ऑलिव ग्रीन) लेकिन घटती हुई अपारदर्शिता: 60%, 50%, 40%, 30%, 20%, 10%।

RGBA vs RGB:

व्यावहारिक उदाहरण:

/* सेमी-ट्रांसपेरेंट ओवरले */
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 50% काला */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* ग्रेडिएंट में पारदर्शिता */
.gradient {
  background: linear-gradient(
    to bottom,
    rgba(255,0,0,0.8),
    rgba(0,0,255,0.2)
  );
}

/* टेक्स्ट पर पारदर्शी बैकग्राउंड */
.text-box {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); /* मॉडर्न: फ्रॉस्टेड ग्लास */
}

मॉडर्न CSS Color Level 4 सिंटैक्स:

color: rgb(108 111 35 / 0.6);    /* स्पेस-सेपरेटेड + अल्फा */
color: rgba(108 111 35 / 60%);   /* प्रतिशत अल्फा */

हेक्स में अल्फा (8-अंकीय हेक्स):

#6C6F2399  /* rgba(108, 111, 35, 0.6) के बराबर */
/* RRGGBBAA फॉर्मेट */