CSS3 का उपयोग करके इमेजेज पर ऑपेसिटी लागू करना

फिल्टर ऑपेसिटी

CSS3 में इमेजेज पर ऑपेसिटी लागू करने के लिए, filter प्रॉपर्टी के लिए opacity() मान का उपयोग करें।

सिंटैक्स:

filter: opacity(percentage);

• 0%: पूरी तरह पारदर्शी (अदृश्य)
• 100%: पूरी तरह अपारदर्शी (डिफ़ॉल्ट, मूल इमेज)
• 0-100% के बीच: आंशिक पारदर्शिता

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: opacity(60%);
}
</style>
</head>
<body>
<h1>Spring Framework सीखें</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Spring Framework सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

आउटपुट

पहली इमेज मूल (100% ऑपेसिटी)। दूसरी इमेज 60% ऑपेसिटी के साथ सेमी-ट्रांसपेरेंट।

filter: opacity() vs opacity प्रॉपर्टी:

अन्य फिल्टर्स के साथ संयोजन:

img.demo {
  filter: opacity(70%) grayscale(50%) contrast(120%);
}

उपयोग के मामले:

• होवर इफेक्ट्स: img:hover { filter: opacity(100%); }
• डिसेबल्ड स्टेट इमेजेज
• लोडिंग प्लेसहोल्डर्स
• मॉडल बैकड्रॉप्स के लिए इमेज डिमिंग

ब्राउज़र सपोर्ट:

सभी आधुनिक ब्राउज़र्स। IE में सपोर्ट नहीं (फॉलबैक: opacity प्रॉपर्टी)।