अपारदर्शिता - सीएसएस-ट्रिक्स

opacityसीएसएस में संपत्ति निर्दिष्ट करता है कि पारदर्शी एक तत्व है।

मूल उपयोग:

div ( opacity: 0.5; )

अपारदर्शिता का डिफ़ॉल्ट प्रारंभिक मान 1 (100% अपारदर्शी) है। अपारदर्शिता विरासत में नहीं मिली है, लेकिन क्योंकि माता-पिता में अस्पष्टता है जो इसके भीतर हर चीज पर लागू होती है। आप कुछ प्रवंचना के बिना माता-पिता की तुलना में एक बच्चे के तत्व को कम पारदर्शी नहीं बना सकते। मान चैनल की अपारदर्शिता ("अल्फा" चैनल) का प्रतिनिधित्व करने वाले 0 से 1 तक की संख्या है। जब किसी तत्व का मान 0 होता है तो तत्व पूरी तरह से अदृश्य होता है; 1 का मान पूरी तरह से अपारदर्शी (ठोस) है।

इस पेन को देखें!

IE संगतता

यदि आप IE के सभी संस्करणों में काम करना चाहते हैं, तो आदेश इस प्रकार होना चाहिए:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

यदि आप इस आदेश का उपयोग नहीं करते हैं, तो IE8-as-IE7 अपारदर्शिता लागू नहीं करता है, हालांकि IE8 और शुद्ध IE7 करते हैं।

स्टैकिंग कॉन्टेक्ट्स पर ध्यान दें

यदि कोई तत्व opacityऔर जिसका मान 1 से कम है, वह z-indexगुण CSS2.1 में वर्णित संपत्ति पर लागू होता है, सिवाय इसके कि autoमान 0 के रूप में माना जाता है क्योंकि एक नया स्टैकिंग संदर्भ हमेशा बनाया जाता है।

अपारदर्शिता का उपयोग visibilityसंपत्ति के विकल्प के रूप में किया जा सकता है : visibility: hidden;बस की तरह है opacity: 0;।