CSS में पारदर्शिता के दो तरीके: opacity प्रॉपर्टी (पूरा तत्व) और rgba() कलर (केवल बैकग्राउंड)। उदाहरण में दोनों दिखाए गए हैं - डिव पर rgba, इमेज पर opacity।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { width: 200px; height: 200px; background-color: rgb(0, 0, 255); color: white; display: inline-block; }
.transparent { background-color: rgba(0, 0, 255, 0.582); }
img { width: 200px; height: 200px; }
.transparent-img { opacity: 0.3; }
</style>
</head>
<body>
<h1>Transparency/Opacity Example</h1>
<div class="transparent">Lorem ipsum...</div>
<div>Lorem ipsum...</div>
<hr>
<img src="https://i.picsum.photos/id/487/300/300.jpg">
<img class="transparent-img" src="https://i.picsum.photos/id/487/300/300.jpg">
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- rgba() - केवल बैकग्राउंड पारदर्शी, टेक्स्ट अपारदर्शी
- opacity - पूरा तत्व पारदर्शी (चाइल्ड सहित)
- उपयोग मामले - rgba: ओवरले, बैनर; opacity: फेड इफेक्ट, डिसेबल स्टेट
- विरासत - opacity चाइल्ड को प्रभावित करता है, rgba नहीं
- मान रेंज - दोनों 0 (पारदर्शी) से 1 (अपारदर्शी)
