opacity प्रॉपर्टी आधुनिक समाधान है और Firefox 0.9+, Safari 2, Opera 9+, IE 9+ और क्रोम के हर संस्करण के लिए काम करती है। -moz-opacity प्रॉपर्टी 0.9 से पुराने Firefox संस्करणों के लिए opacity प्रॉपर्टी है जबकि -khtml-opacity प्रॉपर्टी Safari 1 से शुरू होने वाले संस्करणों के लिए है। filter प्रॉपर्टी IE ब्राउज़र्स 5 से 9 के लिए opacity जैसा प्रभाव देने के लिए है। इन सभी मानों को एक साथ फॉलबैक के रूप में उपयोग करके हम सभी ब्राउज़र्स में 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 for all browsers</h1> <img src="https://i.picsum.photos/id/305/800/800.jpg" /> <img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" /> <h3>The second image above will get opaque on all browsers</h3> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
