सब कुछ आप सीएसएस में अस्पष्टता के बारे में पता करने की आवश्यकता है



यह लेख आपको अवधारणा से परिचित कराएगा जो आपको CSS में अस्पष्टता को समझने में मदद करेगा और आपको बताएगा कि इस पैरामीटर को कैसे नियंत्रित किया जाए।

यह लेख आपको अवधारणा से परिचित कराएगा जो आपको अस्पष्टता को समझने में मदद करेगा और आपको बताएंगे कि इस पैरामीटर को कैसे नियंत्रित करें। इस लेख में निम्नलिखित बिंदुओं को शामिल किया जाएगा,

एक तत्व की पृष्ठभूमि अस्पष्टता HTML डिजाइन में एक उपयोगी सुविधा सेटिंग है। अस्पष्टता (पारदर्शिता का उलटा) का स्तर निर्धारित करके, एक डिजाइनर सीएसएस अपारदर्शिता संपत्ति के माध्यम से तत्व की दृश्यता को नियंत्रित कर सकता है। यह आमतौर पर एक पृष्ठभूमि सेटिंग के रूप में उपयोग किया जाता है जब तत्वों का कैस्केडिंग होता है, एक को दूसरे के ऊपर रखा जाता है।





कैसे int जावा में डबल बारी करने के लिए

सबसे आम परिदृश्य जिसमें यह सुविधा प्रयोग की जाती है, वह है:

  • एक आंशिक रूप से पारदर्शी पृष्ठभूमि छवि को पाठ तत्व के पीछे रखा गया है।
  • पृष्ठभूमि की छवि खतरनाक रूप से दिखाई देती है, इसलिए यह सामने वाले पाठ पर हावी नहीं होती है।
  • जब उपयोगकर्ता स्पष्ट रूप से इसे देखने का विकल्प चुनता है, तो छवि पूर्ण फोकस में आ सकती है।

तुम पर पढ़ने के लिए चाहते हो सकता है सीएसएस अपारदर्शिता के बारे में सीखने से पहले।



एक व्यापक सीएसएस ट्यूटोरियल के लिए, पर जाएँ शुरुआती के लिए एडुर्का सीएसएस ट्यूटोरियल । HTML वेब डिज़ाइन को बढ़ाने के लिए CSS का उपयोग करने के तरीके पर आपको एक उत्कृष्ट हेड-अप मिलेगा।

सीएसएस में अपारदर्शिता पर इस लेख के साथ आगे बढ़ना

सीएसएस में अपारदर्शिता

CSS में, Opacity 0.0 - 1.0 के बीच एक संख्यात्मक मान के रूप में सेट किया गया है। शून्य के करीब मान अधिक पारदर्शिता का प्रतिनिधित्व करते हैं, छवि दृश्यता में बहुत हल्की होगी। आइए 50% पारदर्शिता के साथ दिखाए जा रहे चित्र के उदाहरण से शुरुआत करें। नीचे उदाहरण 1 देखें।



उदाहरण 1: पृष्ठभूमि छवि अर्ध पर सेट की गई- पारदर्शिता

img {अपारदर्शिता: 0.5 फ़िल्टर: अल्फा (अपारदर्शिता = 50) / * IE8 के लिए और पहले * /} आउटपुट- CSS में अस्पष्टता- Edureka 

उदाहरण 1: आउटपुट

मूल छवि (100% अस्पष्टता)

50% अस्पष्टता सेटिंग के साथ छवि

java int से दोगुना बदल जाता है

उपरोक्त उदाहरण में, केवल एक तत्व था - एक छवि। अन्य तत्वों को भी अस्पष्टता पैरामीटर के साथ सेट किया जा सकता है जैसे कि पाठ, डिव तत्व और इतने पर।

सीएसएस में अपारदर्शिता पर इस लेख के साथ आगे बढ़ना

अपारदर्शिता तत्वों के साथ विरासत में मिली है

जब तत्वों को एक दूसरे के ऊपर रखा जाता है, यदि पृष्ठभूमि तत्व में अस्पष्टता सेटिंग होती है, तो यह सभी बाल तत्वों द्वारा विरासत में मिला है। यह है डिफ़ॉल्ट सेटिंग । इसका मतलब है कि अगर किसी टेक्स्ट बॉक्स को एक छवि के ऊपर रखा गया है और छवि में 0.5 अपारदर्शिता सेटिंग है, तो छवि और पाठ तत्व दोनों ही आंशिक रूप से दिखाई देंगे।

आइए हम अपने अगले उदाहरण में TOM & JERRY छवि पर रखे गए बाल पाठ तत्व का उदाहरण लें। हम उदाहरण 2 में डिफ़ॉल्ट अपारदर्शिता प्रभाव देख सकते हैं।

.container {स्थिति: सापेक्ष पाठ-संरेखण: केंद्र अपारदर्शिता: 0.5}। किराए पर {स्थिति: पूर्ण शीर्ष: 50% बचा: 50% परिवर्तन: अनुवाद (-50%, -50%) रंग: नीला फ़ॉन्ट-आकार: 40px} } टॉम जेरी

उदाहरण 2: मूल माता-पिता की छवि से पाठ को विरासत में मिला है

सीएसएस में अपारदर्शिता पर इस लेख के साथ आगे बढ़ना

RGBA cascading तत्वों के लिए सेटिंग की विशेषता

एक और तरीका है जिसमें अपारदर्शिता को कैस्केडिंग तत्वों के साथ नियंत्रित किया जा सकता है। यदि आप चाहते हैं कि बाल तत्व अपनी पृष्ठभूमि तत्व की अस्पष्टता से अप्रभावित रहे, तो आप उपयोग कर सकते हैं RGBA विशेषता सेटिंग

उदाहरण 3: RGBA सेटिंग का उपयोग करना

पृष्ठभूमि: rgba (76, 175, 80, 1.0) / * छवि में कोई अस्पष्टता सेटिंग नहीं है * / / * 100% अस्पष्टता के साथ पाठ के लिए हरे रंग की पृष्ठभूमि * / / * नीले रंग के पाठ में 100% अस्पष्टता है / *

पृष्ठभूमि: rgba (76, 175, 80, 0.4) / * छवि में कोई अस्पष्टता सेटिंग नहीं है * / / * 40% अस्पष्टता के साथ पाठ के लिए हरी पृष्ठभूमि * / / * नीला पाठ अभी भी 100% अस्पष्टता के साथ देखा जाता है * /

RGB रंग कोड के बाद, 'a' का अर्थ है अल्फा । द अल्फा पैरामीटर 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच एक संख्या है।

सीएसएस में अपारदर्शिता पर इस लेख के साथ आगे बढ़ना

होवर प्रभाव पर अपारदर्शिता बदल जाती है

कुछ परिदृश्यों में, वेब डिजाइनर चाहते हैं कि उपयोगकर्ता तत्व पर केंद्रित है या नहीं, इसके आधार पर अस्पष्टता भिन्न हो सकती है। उदाहरण के लिए, मान लें कि एक छवि डिफ़ॉल्ट रूप से 50% अस्पष्टता पर सेट है। हालांकि, जब उपयोगकर्ता छवि पर माउस को घुमाता है, तो हम चाहते हैं कि छवि 100% अस्पष्टता के साथ पूर्ण ध्यान में आए।

उदाहरण 4 दिखाता है कि यह कैसे किया जाता है।

ध्यान देने योग्य सामान्य बिंदु:

  • सीएसएस में दृश्यता विशेषता का उपयोग करने के लिए अपारदर्शिता सेटिंग एक विकल्प है। हालांकि, अपारदर्शिता सेटिंग का उपयोग करने से शून्य से पूर्ण तक पारदर्शिता की अलग-अलग डिग्री सेट करना आसान हो जाता है।
  • विभिन्न ब्राउज़रों में सावधानीपूर्वक परीक्षण के बाद अपारदर्शिता का स्तर निर्धारित किया जाना है। जब अस्पष्टता कम मूल्यों पर सेट होती है, तो कभी-कभी पाठ या छवि पूरी तरह से अदृश्य या अपठनीय हो सकती है।
  • अपारदर्शिता का उपयोग करने के पीछे का विचार कुछ तत्वों पर तेज ध्यान केंद्रित करना है जबकि अन्य पृष्ठभूमि तत्व उपयोगकर्ता के ध्यान को विचलित नहीं करते हैं। तो ऐसे बैकग्राउंड एलिमेंट को कम अपारदर्शिता के साथ सेट किया जाता है।
  • इंटरनेट एक्सप्लोरर में, IE8 और पुराने संस्करणों के लिए, अपारदर्शिता संपत्ति 1 से 100 तक की 'फ़िल्टर' सेटिंग है। अन्य सभी ब्राउज़रों में, यह 0 से 1 तक है।

यह हमें Opacity In CSS पर इस लेख के अंत में लाता है।

यदि आप वेब-डेवलपमेंट के बारे में अधिक जानने में रुचि रखते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, Twitter बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

यदि आप अभी भी रुचि रखते हैं यदि आपके कोई प्रश्न हैं, तो आप इसे इस 'ओपेसिटी इन सीएसएस' ब्लॉग के टिप्पणी अनुभाग में पोस्ट कर सकते हैं, और हम जल्द से जल्द आपके पास वापस आ जाएंगे।

अजगर में __in__ का क्या अर्थ है