संपत्ति अस्पष्टता आधुनिक समाधान है और फ़ायरफ़ॉक्स 0.9+, सफारी 2, ओपेरा 9+, आईई 9+ और क्रोम के हर संस्करण के लिए काम करती है। -मोज़-अपारदर्शिता गुण 0.9 से अधिक पुराने फ़ायरफ़ॉक्स संस्करणों के लिए अस्पष्टता गुण है, जबकि -khtml-अस्पष्टता गुण 1 से शुरू होने वाले सफारी संस्करणों के लिए है। फ़िल्टर गुण IE ब्राउज़रों के लिए 5 से 9 तक अस्पष्टता जैसा प्रभाव देने के लिए है। इन सभी मानों को एक साथ आधुनिक अपारदर्शिता के लिए एक फ़ॉलबैक के रूप में उपयोग करने से हम सभी ब्राउज़रों में अपारदर्शिता का उपयोग कर सकते हैं।
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>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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
