पुराने ब्राउज़र सपोर्ट के लिए कई ओपेसिटी प्रॉपर्टी एक साथ उपयोग करें: opacity (आधुनिक), filter: alpha(opacity=30) (IE 5-9), -moz-opacity (पुराना फायरफॉक्स), -khtml-opacity (पुराना सफारी)।
उदाहरण
<!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>Cross browser opacity</h1>
<img src="https://i.picsum.photos/id/605/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- opacity: 0.3 - आधुनिक मानक (IE9+, सभी आधुनिक)
- filter: alpha(opacity=30) - IE 5-9 के लिए (0-100 स्केल)
- -moz-opacity: 0.3 - फायरफॉक्स < 0.9 के लिए
- -khtml-opacity: 0.3 - सफारी 1.x के लिए
- फॉलबैक क्रम - ब्राउज़र पहला समर्थित उपयोग करता है
- नोट - आजकल केवल opacity पर्याप्त है
