CSS में rgba के माध्यम से रंग निर्दिष्ट करना

rgb प्रारूप के अलावा rgba प्रारूप भी मौजूद है, जो समान तरीके से काम करता है, लेकिन चौथे पैरामीटर के द्वारा रंग को अर्ध-पारदर्शिता निर्दिष्ट करने की अनुमति देता है। यह पैरामीटर 0 से 1 तक दशमलव मान स्वीकार करता है। इसमें एक पूर्ण अपारदर्शिता के अनुरूप है, और शून्य - पूर्ण पारदर्शिता के अनुरूप है।

आइए उदाहरणों पर नजर डालते हैं।

उदाहरण

शुरुआत में आइए ऐसा एक अपारदर्शी ब्लॉक बनाएं:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0); /* लाल रंग */
}

Результат:

उदाहरण

अब टेक्स्ट में अर्ध-पारदर्शिता जोड़ते हैं:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.5); /* लाल अर्ध-पारदर्शी */
}

Результат:

उदाहरण

अब एक अर्ध-पारदर्शी बॉर्डर बनाते हैं:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid rgba(255, 0, 0, 0.5); /* लाल अर्ध-पारदर्शी */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

उदाहरण

अब एक अर्ध-पारदर्शी बैकग्राउंड बनाते हैं:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  background-color: rgba(0, 0, 0, 0.4); /* काला अर्ध-पारदर्शी */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

व्यावहारिक कार्य