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;
}

Результат:

ප්‍රායෝගික කාර්යයන්