आधुनिक ब्राउज़र में opacity प्रॉपर्टी (0 से 1) काम करती है। यह पूरे तत्व (कंटेंट सहित) को पारदर्शी बनाती है। उदाहरण में दो समान इमेज हैं, दूसरी पर opacity: 0.3 लागू है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
img { width: 270px; height: 200px; }
.transparent { opacity: 0.3; }
</style>
</head>
<body>
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- opacity: 0.3 - 30% अपारदर्शी, 70% पारदर्शी
- पूरा तत्व प्रभावित - इमेज और कोई भी चाइल्ड कंटेंट
- आधुनिक ब्राउज़र सपोर्ट - IE9+, फायरफॉक्स, क्रोम, सफारी, ओपेरा
- विरासत में मिलती है - चाइल्ड तत्व भी पारदर्शी हो जाते हैं
- RGBA से अलग - RGBA केवल बैकग्राउंड, opacity पूरे तत्व पर
