CSS अपारदर्शिता (Opacity)
आप ठोस रंग, फ़ोटो और ग्रेडिएंट जानते हैं। कभी पूरा तत्व नरम दिखना चाहिए — फीकी परत, अक्षम बटन, पीछे हटता कार्ड। यही opacity का काम है: पूरा बॉक्स कितना ठोस या पारदर्शी दिखे।
opacity क्या करता है?
opacity प्रॉपर्टी बताती है तत्व कितना अपारदर्शी है। मान 1 (पूरी तरह ठोस, अक्सर डिफ़ॉल्ट) से 0 (पूरी तरह अदृश्य) तक जाता है। 0.5 जैसे दशमलव बीच में हैं। महत्वपूर्ण: opacity तत्व और उसके अंदर सब पर लागू होती है — टेक्स्ट, बॉर्डर, बैकग्राउंड और बच्चे बॉक्स साथ फीके होते हैं।
Opacity बनाम रंग अल्फा
इन दो विचारों को आसानी से मिला दिया जाता है। अलग रखें।
📊 Opacity बनाम रंग अल्फा
| उपकरण | क्या फीका होता है | आम उपयोग |
|---|---|---|
opacity |
पूरा तत्व (और उसके बच्चे) | नरम ओवरले, अक्षम लुक, बाद में फीड मोशन |
rgba() / hsla() अल्फा |
केवल वह रंग परत | पारदर्शी बैकग्राउंड, ऊपर ठोस टेक्स्ट |
कीवर्ड transparent |
पूरी तरह साफ़ रंग मान | प्रॉपर्टी हटाए बिना बॉर्डर रंग छिपाना |
visibility: hidden |
दृष्टि से छिपा, लेआउट रहता | दूसरा उपकरण — यहाँ गहराई नहीं |
पूरी तरह ठोस और आधा फीका
पहले उसी कार्ड डिज़ाइन पर 1 और 0.5 की तुलना करें।
ठोस बनाम आधी opacity
css.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}
.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}आपको क्या दिखना चाहिए
.card-soft पर बैकग्राउंड और टेक्स्ट दोनों धुले लगते हैं। Opacity अक्षर नहीं छोड़ती।
बच्चे पैरेंट के साथ फीके होते हैं
अगर पैरेंट पर opacity: 0.4 है, नेस्टेड शीर्षक और बटन अपना opacity: 1 लगाकर «बाहर» नहीं निकल सकते। वे पहले से फीकी परत में रंगे जाते हैं।
पैरेंट opacity बच्चों को धोती है
css.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}
.overlay strong {
opacity: 1; /* फीके पैरेंट के अंदर पूरी ताकत वापस नहीं आती */
}डिज़ाइन संकेत
ठंढा पैनल पर तेज़ टेक्स्ट चाहिए? पूरे तत्व पर opacity नहीं — बैकग्राउंड रंग को rgba से नरम करें।
केवल भराव नरम हो तो rgba चुनें
यहाँ पैनल बैकग्राउंड आंशिक पारदर्शी है, टेक्स्ट पूरी ताकत पर रहता है।
नरम भराव, ठोस टेक्स्ट
css.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* पूरी ताकत वाला टेक्स्ट */
padding: 1rem;
}फीकी UI आदत
आम पैटर्न: द्वितीयक क्रियाओं या अक्षम नियंत्रणों पर थोड़ी कम opacity ताकि शांत लगें — फिर भी कंट्रास्ट पढ़ने लायक।
फीका द्वितीयक बटन
css.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}शून्य अदृश्य है — जगह रह सकती है
opacity: 0 तत्व अदृश्य करता है, पर लेआउट जगह अभी भी ले सकता है और संदर्भ के अनुसार पॉइंटर इवेंट भी। लेआउट से हटाना हो तो दूसरा उपकरण (display: none), केवल opacity नहीं।
अदृश्य पर अभी भी प्रवाह में
css.ghost {
opacity: 0;
}खुद आज़माएँ
- समान रंगों वाले दो कार्ड; एक
opacity: 1, एकopacity: 0.5। opacity: 0.4पैरेंट के अंदर बोल्ड लाइन — पुष्टि करें कि बच्चे को पूरी तरह «अनफेड» नहीं कर सकते।- नरम लुक
background-color: rgba(…, 0.25)और ठोसcolorसे दोबारा बनाएँ। - द्वितीयक बटन
opacity: 0.75और पठनीयता जाँचें। - वैकल्पिक: बॉक्स पर
opacity: 0— लेआउट में खाली जगह देखें।
आम गलतियाँ
- केवल पारदर्शी बैकग्राउंड चाहते हुए पैरेंट पर
opacity - फीके पैरेंट में बच्चे के
opacity: 1से पूरी तरह ठोस दिखने की उम्मीद - लेआउट जगह हटाने के बजाय
opacity: 0 - इतनी कम opacity कि टेक्स्ट कंट्रास्ट फेल हो
transparentकीवर्ड कोopacityप्रॉपर्टी से मिलाना
सार
opacityबताता है पूरा तत्व कितना पारदर्शी है (0–1)- बच्चे पैरेंट के साथ फीके होते हैं — अंदर से पूरी तरह नहीं बचते
- ठोस टेक्स्ट वाले नरम बैकग्राउंड के लिए
rgba/hslaअल्फा चुनें - कम opacity UI शांत कर सकती है; पहुँच सोचें
- अदृश्य (
0) लेआउट से हटाए जाने जैसा नहीं - कार्ड जोड़ी और rgba पुनर्निर्माण तब तक अभ्यास करें जब तक फर्क साफ़ लगे
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी