opacity प्रॉपर्टी अंतिम और आधुनिक समाधान है और Firefox 0.9+, Safari 2, Opera 9+, IE 9+ और Google Chrome के हर संस्करण के लिए काम करती है। -moz-opacity प्रॉपर्टी 0.9 से पुराने Firefox संस्करणों के लिए opacity प्रॉपर्टी है जबकि -khtml-opacity प्रॉपर्टी Safari 1 से शुरू होने वाले संस्करणों के लिए है। filter प्रॉपर्टी IE ब्राउज़र्स 5 से 9 के लिए opacity जैसा प्रभाव देने के लिए है।
सभी ब्राउज़र्स के लिए CSS का उपयोग करके इमेज ऑपेसिटी का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img { width:270px; height:200px; } .transparent{ filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; 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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
