CSS හි rgba මගින් වර්ණයක් සැකසීම

rgb ආකෘතියට අමතරව rgba ආකෘතියද පවතී, එය සමාන ආකාරයකින් ක්‍රියා කරන නමුත් සිව්වන පරාමිතිය මගින් වර්ණයට අර්ධ-පාරදෘෂ්‍යතාවය සැකසීමට ඉඩ දෙයි. මෙම පරාමිතිය 0 සිට 1 දක්වා භාගික අගයන් ගනී. මෙහිදී එකක් පූර්ණ අපාරදෘෂ්‍යතාවයට සමාන වන අතර, ශුන්‍යය - පූර්ණ පාරදෘෂ්‍යතාවයට සමාන වේ.

අපි උදාහරණ මගින් බලමු.

උදාහරණය

පළමුව, මෙවැනි අපාරදෘෂ්‍ය බ්ලොක් එකක් සාදමු:

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

#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); /* රතු වර්ණය */
}

උදාහරණය

දැන් පෙළට අර්ධ-පාරදෘෂ්‍යතාවයක් එකතු කරමු:

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

#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); /* රතු අර්ධ-පාරදෘෂ්‍ය */
}

උදාහරණය

දැන් අර්ධ-පාරදෘෂ්‍ය මායිමක් සාදමු:

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

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

උදාහරණය

දැන් අර්ධ-පාරදෘෂ්‍ය පසුබිමක් සාදමු:

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

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

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

ඡේදවලට රතු අර්ධ-පාරදෘෂ්‍ය වර්ණයක් සකසන්න.

පසුබිමට කොළ අර්ධ-පාරදෘෂ්‍ය වර්ණයක් සකසන්න.

මායිමට නිල් අර්ධ-පාරදෘෂ්‍ය වර්ණයක් සකසන්න.