CSS3 अस्पष्टता के बारे में जानें

अपनी पृष्ठभूमि पारदर्शी बनाना

उन चीजों में से एक जो आप आसानी से प्रिंट डिज़ाइन में कर सकते हैं लेकिन वेब पर नहीं, छवि या रंगीन पृष्ठभूमि पर ओवरले टेक्स्ट है, और उस छवि की पारदर्शिता को बदलें ताकि पाठ पृष्ठभूमि में फीका हो। लेकिन CSS3 में एक संपत्ति है जो आपको अपने तत्वों की अस्पष्टता को बदलने की अनुमति देगी ताकि वे अंदर और बाहर फीका हो: अस्पष्टता।

अस्पष्टता संपत्ति का उपयोग कैसे करें

अस्पष्टता संपत्ति 0.0 से 1.0 तक पारदर्शिता की मात्रा का एक मूल्य लेती है।

0.0 100% पारदर्शी है- उस तत्व के नीचे कुछ भी पूरी तरह से दिखाएगा। 1.0 तत्व के नीचे 100% अपारदर्शी-कुछ भी दिखाएगा।

तो तत्व को 50% पारदर्शी सेट करने के लिए, आप लिखेंगे:

अस्पष्टता: 0.5;

कार्रवाई में अस्पष्टता के कुछ उदाहरण देखें

पुराने ब्राउज़र में परीक्षण करना सुनिश्चित करें

न तो आईई 6 और न ही 7 CSS3 अस्पष्टता संपत्ति का समर्थन करते हैं। लेकिन आप भाग्य से बाहर नहीं हैं। इसके बजाय, आईई एक माइक्रोसॉफ्ट-केवल संपत्ति अल्फा फ़िल्टर का समर्थन करता है। आईई में अल्फा फ़िल्टर 0 (पूरी तरह से पारदर्शी) से मूल्य 100 (पूरी तरह से अपारदर्शी) स्वीकार करते हैं। इसलिए, आईई में अपनी पारदर्शिता प्राप्त करने के लिए, आपको अपनी अस्पष्टता 100 से गुणा करना चाहिए और अपनी शैलियों में अल्फा फ़िल्टर जोड़ना चाहिए:

फ़िल्टर: अल्फा (अस्पष्टता = 50);

कार्रवाई में अल्फा फ़िल्टर देखें (केवल आईई)

और ब्राउज़र उपसर्ग का प्रयोग करें

आपको -मोज़- और -webkit- उपसर्गों का उपयोग करना चाहिए ताकि मोज़िला और वेबकिट ब्राउज़र के पुराने संस्करण भी इसका समर्थन कर सकें:

-वेबकिट-अस्पष्टता: 0.5;
-मोज़-अस्पष्टता: 0.5;
अस्पष्टता: 0.5;

हमेशा ब्राउज़र उपसर्ग पहले रखें, और वैध CSS3 संपत्ति अंतिम।

पुराने मोज़िला और वेबकिट ब्राउज़र में ब्राउज़र उपसर्ग का परीक्षण करें।

आप छवियों को पारदर्शी बना सकते हैं

छवि पर अस्पष्टता सेट करें और यह पृष्ठभूमि में फीका होगा। यह पृष्ठभूमि छवियों के लिए वास्तव में उपयोगी है।

और यदि आप एंकर टैग में जोड़ते हैं तो आप छवि की अस्पष्टता को बदलकर होवर प्रभाव बना सकते हैं।

ए: होवर आईएमजी {
फ़िल्टर: अल्फा (अस्पष्टता = 50)
फ़िल्टर: प्रोजेड: DXImageTransform.Microsoft.Alpha (अस्पष्टता = 50)
-मोज़-अस्पष्टता: 0.5;
-वेबकिट-अस्पष्टता: 0.5;
अस्पष्टता: 0.5;
}

इस एचटीएमएल को प्रभावित करता है:

कार्रवाई में उपरोक्त शैलियों और एचटीएमएल का परीक्षण करें।

अपनी छवियों पर पाठ रखें

अस्पष्टता के साथ, आप एक छवि पर टेक्स्ट डाल सकते हैं और उस छवि को फीका कर सकते हैं जहां वह टेक्स्ट है।

यह तकनीक थोड़ा मुश्किल है, क्योंकि आप छवि को आसानी से फीका नहीं कर सकते हैं, क्योंकि यह पूरी छवि को फीका कर देगा। और आप टेक्स्ट बॉक्स को फीका नहीं कर सकते हैं, क्योंकि टेक्स्ट वहां भी फीका होगा।

1. सबसे पहले आप एक कंटेनर डीआईवी बनाते हैं और अपनी छवि को अंदर रखें:

   
   

2. एक खाली डीआईवी के साथ छवि का पालन करें- यही वह है जिसे आप पारदर्शी बना देंगे।

   
   
   

3. आपके एचटीएमएल में जो आखिरी चीज आप जोड़ते हैं वह आपके टेक्स्ट के साथ डीआईवी है:

   
   
   
   यह मेरा कुत्ता शास्ता है। क्या वह प्यारा नहीं है!

4. छवि के ऊपर पाठ रखने के लिए, आप इसे सीएसएस पोजिशनिंग के साथ शैलीबद्ध करते हैं। मैंने अपना टेक्स्ट बाईं तरफ रखा, लेकिन आप इसे दो बाएं बदलकर दाईं ओर रख सकते हैं: 0; गुण सही: 0; ।

   #image {
   स्थिति: रिश्तेदार;
   चौड़ाई: 170px;
   ऊँचाई: 128px;
   मार्जिन: 0;
   }
   #text {
   स्थिति: पूर्ण;
   शीर्ष: 0;
   बाएं: 0;
   चौड़ाई: 60px;
   ऊँचाई: 118px;
   पृष्ठभूमि: #fff;
   गद्दी: 5px;
   }
   #text {
   फ़िल्टर: अल्फा (अस्पष्टता = 70);
   फ़िल्टर: प्रोजेड: DXImageTransform.Microsoft.Alpha (अस्पष्टता = 70);
   -मोज़-अस्पष्टता: 0.70;
   अस्पष्टता: 0.7;
   }
   #words {
   स्थिति: पूर्ण;
   शीर्ष: 0;
   बाएं: 0;
   चौड़ाई: 60px;
   ऊँचाई: 118px;
   पृष्ठभूमि: पारदर्शी;
   गद्दी: 5px;
   }

देखें कि यह कैसा दिखता है