संपत्ति अस्पष्टता आधुनिक समाधान है और फ़ायरफ़ॉक्स 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>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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
