CSS में opacity गुण के माध्यम से पारदर्शिता

तत्व की पारदर्शिता को opacity गुण के माध्यम से भी निर्धारित किया जा सकता है। यह गुण 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;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	
	border: 20px solid red;
	background: black;
	color: red;
	
	opacity: 0.7;
}

मान लें कि आपके पास एक पृष्ठभूमि छवि है। उसके ऊपर पाठ, बॉर्डर और पृष्ठभूमि वाले दो ब्लॉक रखें। इन ब्लॉकों पर opacity के माध्यम से पारदर्शिता और rgba के माध्यम से पारदर्शिता के बीच का अंतर प्रदर्शित करें।