यह ब्लॉग निम्नलिखित मूल अवधारणाओं पर विस्तार से बताता है:
- टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग/उपयोग कैसे करें?
- टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट लागू करना।
- टेलविंड में बैकग्राउंड क्लिप के साथ मीडिया क्वेरीज़ लागू करना।
टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग/उपयोग कैसे करें?
“ बीजी-क्लिप-{कीवर्ड} उपयोगिता का उपयोग तत्व की पृष्ठभूमि के बाउंडिंग बॉक्स को सेट करने के लिए किया जाता है। इस उपयोगिता का उपयोग कई गुणों के साथ किया जा सकता है, जैसे ' गद्दी-बॉक्स ', ' बॉर्डर-बॉक्स ', ' सामग्री बॉक्स ', और ' पाठ बॉक्स ”।
उदाहरण 1: टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट लागू करना
यह उदाहरण लागू 'के माध्यम से पृष्ठभूमि क्लिप के साथ ब्रेकप्वाइंट लागू करता है' बीजी-क्लिप-{कीवर्ड} 'के साथ उपयोगिता' एमडी 'यानी, मध्यम आकार की स्क्रीन और' एलजी यानी, बड़े आकार की स्क्रीन कक्षाएं:
< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी >
< / सिर >
< शरीर >
< पाठ क्षेत्र कक्षा = 'बीजी-क्लिप-बॉर्डर पी-6 बीजी-पीला-500 बॉर्डर-4 बॉर्डर-लाल-500 बॉर्डर-डैश्ड एमडी: बीजी-क्लिप-टेक्स्ट एलजी: बीजी-क्लिप-पैडिंग' > यह टेलविंड सीएसएस है < / पाठ क्षेत्र >
< / शरीर >
< / एचटीएमएल >
इन कोड पंक्तियों के अनुसार:
- सबसे पहले, टेलविंड कार्यात्मकताओं का उपयोग करने के लिए सीडीएन पथ निर्दिष्ट करें।
- फिर, एक '
टिप्पणी: उपयोगिता को निर्दिष्ट करना बस इसे 'में निर्दिष्ट करने जैसा ही है' एस.एम ' कक्षा।
उत्पादन
यह परिणाम दर्शाता है कि स्क्रीन का आकार बढ़ाने पर, पृष्ठभूमि को तदनुसार क्लिप किया जाता है।
उदाहरण 2: टेलविंड में बैकग्राउंड क्लिप के साथ मीडिया क्वेरीज़ लागू करना
निम्नलिखित कोड प्रदर्शन 'पृष्ठभूमि क्लिप' के साथ मीडिया क्वेरीज़ को 'के माध्यम से लागू करता है' @मीडिया 'नियम और निर्दिष्ट पैरामीटर:
< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी >
< / सिर >
< शरीर >
< पाठ क्षेत्र कक्षा = 'पी-6 बीजी-पीला-500 बॉर्डर-4 बॉर्डर-लाल-500 बॉर्डर-डैश्ड' पहचान = 'अस्थायी' >यह टेलविंड सीएसएस< है / पाठ क्षेत्र >
< / शरीर >
< शैली प्रकार = 'पाठ/सीएसएस' >
#अस्थायी {
बैकग्राउंड-क्लिप: बॉर्डर-बॉक्स;
}
@ मिडिया ( अधिकतम- चौड़ाई :500px ) {
#अस्थायी {
बैकग्राउंड-क्लिप: पैडिंग-बॉक्स;
} }
< / शैली >
< / एचटीएमएल >
कोड के इस स्निपेट में:
- टेलविंड सीडीएन पथ को शामिल करने और '
- अब, CSS कोड में, डिफ़ॉल्ट निर्दिष्ट करें ' पृष्ठभूमि-क्लिप 'संपत्ति के रूप में' बॉर्डर-बॉक्स ”।
- उसके बाद, ' को लागू करें @मीडिया 'दिए गए पैरामीटर के साथ नियम बनाएं जैसे कि जब तक स्क्रीन की चौड़ाई '500' पिक्सेल के बराबर हो, ' पृष्ठभूमि-क्लिप 'संपत्ति' पर सेट है गद्दी-बॉक्स ”।
उत्पादन
इस परिणाम से, यह सत्यापित किया जा सकता है कि बैकग्राउंड क्लिप को स्क्रीन की बदली हुई चौड़ाई के अनुसार परिवर्तित किया गया है।
निष्कर्ष
बैकग्राउंड क्लिप का उपयोग टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ लागू 'के माध्यम से किया जा सकता है' बीजी-क्लिप-{कीवर्ड} 'के साथ उपयोगिता' एमडी ' या ' एलजी ' कक्षाएं, या ' के माध्यम से @मीडिया ' नियम। कीवर्ड को 'पैडिंग-बॉक्स', 'बॉर्डर-बॉक्स', 'कंटेंट-बॉक्स', 'टेक्स्ट-बॉक्स' और बहुत कुछ पर सेट किया जा सकता है। इस गाइड में, हमने टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ के उपयोग का प्रदर्शन किया है।