CSS opacity() फ़ंक्शन

वर्णन और उपयोग

CSS opacity() फ़िल्टर फ़ंक्शन एलिमेंट पर पारदर्शिता प्रभाव लगाने के लिए प्रयोग किया जाता है。

  • 100%（या 1）कोई प्रभाव नहीं होगा
  • 50%（या 0.5）एलिमेंट 50% पारदर्शी होगा
  • 0%（या 0）एलिमेंट पूरी तरह से पारदर्शी बनाएगा

उदाहरण

उदाहरण 1

इमेज़ के लिए अलग-अलग पारदर्शिता सेट करें:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

खुद से प्रयोग करें

उदाहरण 2

द्वारा opacity() साथ मिलाकर प्रयोग backdrop-filter संबंधित विशेषताएँ

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

खुद से प्रयोग करें

CSS व्याकरण

opacity(amount)
मान वर्णन
amount

वैकल्पिक।पारदर्शिता के लिए नंबर या प्रतिशत निर्दिष्ट करें।0%（या 0）एलिमेंट पूरी तरह से पारदर्शी बनाएगा。

100%（या 1）असली इमेज़ (बिना प्रभाव) को प्रदर्शित करता है।मूलभूत मान 1 है。

तकनीकी विवरण

संस्करण: CSS Filter Effects Module Level 1

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फ़ायरफॉक्स सफारी ओपेरा
18 12 35 6 15

संबंधित पृष्ठ

संदर्भःCSS filter गुण

संदर्भःCSS blur() फ़ंक्शन

संदर्भःCSS brightness() फ़ंक्शन

संदर्भःCSS contrast() फ़ंक्शन

संदर्भःCSS drop-shadow() फ़ंक्शन

संदर्भःCSS grayscale() फ़ंक्शन

संदर्भःCSS hue-rotate() फ़ंक्शन

संदर्भःCSS invert() फ़ंक्शन

संदर्भःCSS saturate() फ़ंक्शन

संदर्भःCSS sepia() फ़ंक्शन