सीएसएस पृष्ठभूमि बनाम पृष्ठभूमि-रंग

CSS HTML तत्वों को स्टाइल करने के लिए विभिन्न गुण प्रदान करता है। इन गुणों का उपयोग विभिन्न उद्देश्यों के लिए किया जाता है, जैसे कि पृष्ठभूमि छवि और रंग जोड़ना और HTML तत्वों की चौड़ाई और ऊंचाई निर्धारित करना। इन गुणों में मार्जिन, रंग, चौड़ाई, ऊंचाई, पृष्ठभूमि, पृष्ठभूमि-रंग, और बहुत कुछ शामिल हैं। अधिक विशेष रूप से, पृष्ठभूमि और पृष्ठभूमि-रंग संपत्ति का उपयोग HTML तत्वों की पृष्ठभूमि को सेट करने के लिए किया जाता है।

इस मैनुअल में, हम पृष्ठभूमि और पृष्ठभूमि-रंग के गुणों के बीच के अंतर को विस्तार से जानेंगे।

चलो शुरू करते हैं!

सीएसएस पृष्ठभूमि संपत्ति

किसी भी HTML तत्व की पृष्ठभूमि को समायोजित करने के लिए, CSS “ पार्श्वभूमि 'संपत्ति का उपयोग किया जाता है। यह आठ और संपत्तियों की एक शॉर्टहैंड संपत्ति है जिसका अर्थ है कि आप उन सभी को एक पंक्ति में उपयोग कर सकते हैं। वे अन्य गुण हैं:

पीछे का रंग
पृष्ठभूमि छवि
पृष्ठभूमि स्थिति
पृष्ठभूमि-आकार
पृष्ठभूमि दोहराएँ
पृष्ठभूमि मूल के
पृष्ठभूमि-क्लिप
पृष्ठभूमि संलग्न

वाक्य - विन्यास

यहाँ पृष्ठभूमि संपत्ति का सिंटैक्स है:

पृष्ठभूमि: रंग छवि स्थिति/आकार दोहराने मूल क्लिप अनुलग्नक

आइए एक-एक करके उपर्युक्त सभी गुणों की व्याख्या की ओर बढ़ते हैं।

सीएसएस पृष्ठभूमि-रंग संपत्ति

का उपयोग करते हुए ' पीछे का रंग 'गुण, आप पृष्ठभूमि का रंग सेट कर सकते हैं। रंग HTML तत्वों के पीछे दिखाई देगा।

वाक्य - विन्यास

बैकग्राउंड-कलर प्रॉपर्टी का सिंटैक्स है:

पीछे का रंग : रंग

की जगह ' रंग ”, आप उस पृष्ठभूमि का रंग सेट कर सकते हैं जिसे आप तत्वों के पीछे दिखाना चाहते हैं।

उदाहरण

सबसे पहले, HTML फ़ाइल में, हम

टैग का उपयोग करके एक कंटेनर बनाएंगे और फिर एक शीर्षक और पैराग्राफ जोड़ेंगे।

एचटीएमएल

< डिव >

< एच 1 > लिनक्ससंकेत < / एच 1 >

< पी > हमारी वैबसाइट पर आपका स्वागत है < / पी >

< / डिव >

CSS में, हम div की ऊंचाई को “के रूप में समायोजित करेंगे” 100% 'इसे पूरे पृष्ठ पर और टेक्स्ट के फ़ॉन्ट-आकार पर' के रूप में प्रदर्शित करने के लिए xx-बड़े ' उसके बाद, बैकग्राउंड कलर को “के रूप में सेट करें” पानी '

सीएसएस

डिव {

कद : 100% ;

फ़ॉन्ट आकार : xx-बड़े ;

पीछे का रंग : पानी ;

}

नीचे दी गई छवि में, आप देख सकते हैं कि पृष्ठभूमि का रंग लागू किया गया है:

सीएसएस पृष्ठभूमि-छवि संपत्ति

' पृष्ठभूमि छवि संपत्ति का उपयोग HTML तत्वों की पृष्ठभूमि के रूप में एक या अधिक छवियों को सेट करने के लिए किया जाता है। आप इस संपत्ति का उपयोग विभिन्न तत्वों के लिए अलग-अलग पृष्ठभूमि छवियों को जोड़ने के लिए कर सकते हैं।

वाक्य - विन्यास

बैकग्राउंड-इमेज प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि-छवि: यूआरएल ()

यहां, उस छवि का पथ दें जिसे आप पृष्ठभूमि के रूप में एक तर्क के रूप में सेट करना चाहते हैं ' यूआरएल () '

उदाहरण

पिछले उदाहरण की निरंतरता में, 'में एक पृष्ठभूमि छवि जोड़ें' डिव ' कक्षा। हम इमेज के url को “के रूप में जोड़ेंगे” यूआरएल (img.jpg) ':

डिव {

...

पृष्ठभूमि छवि : यूआरएल ( img.jpg ) ;

}

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

ध्यान दें कि छवि दोहराई गई है। इस समस्या को हल करने के लिए, अगली संपत्ति देखें।

CSS बैकग्राउंड-रिपीट प्रॉपर्टी

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

वाक्य - विन्यास

बैकग्राउंड-रिपीट प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि दोहराएँ : दोहराना | दोहराने-x | दोहराने-y | कोई दोहराने

बैकग्राउंड-रिपीट प्रॉपर्टी के बताए गए मानों का विवरण नीचे दिया गया है:

दोहराना: इसका उपयोग छवि को ऊर्ध्वाधर और क्षैतिज दोनों दिशाओं में दोहराने के लिए किया जाता है।
दोहराना-एक्स: इसका उपयोग छवि की पुनरावृत्ति को केवल क्षैतिज रूप से सेट करने के लिए किया जाता है।
दोहराना-वाई: यह छवि के लंबवत दोहराव को निर्दिष्ट करता है।
दोहराना नहीं: इसका उपयोग छवि की पुनरावृत्ति से बचने के लिए किया जाता है।

उदाहरण

यहां, हम बैकग्राउंड-रिपीट प्रॉपर्टी का मान “के रूप में सेट करेंगे” कोई दोहराने ':

डिव {

...

पृष्ठभूमि दोहराएँ : कोई दोहराने ;

}

ऊपर दिए गए कोड का परिणाम नीचे दिया गया है। आप देख सकते हैं कि छवि अब दोहराई नहीं गई है:

सीएसएस पृष्ठभूमि-स्थिति संपत्ति

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

वाक्य - विन्यास

बैकग्राउंड-पोजिशन प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि स्थिति : मूल्य

की जगह ' मूल्य ”, आप छवि की स्थिति निर्दिष्ट कर सकते हैं।

उदाहरण

यहां, हम पृष्ठभूमि-स्थिति को 'के रूप में सेट करेंगे' केंद्र ':

डिव {

...

पृष्ठभूमि स्थिति : केंद्र ;

}

नीचे दिए गए आउटपुट में, छवि पृष्ठ के केंद्र में दिखाई देती है:

CSS पृष्ठभूमि-आकार की संपत्ति

पृष्ठभूमि छवि का आकार निर्धारित करने के लिए, ' पृष्ठभूमि-आकार 'संपत्ति का उपयोग किया जाता है।

वाक्य - विन्यास

पृष्ठभूमि-आकार में निम्न सिंटैक्स है:

पृष्ठभूमि-आकार : लंबाई|कवर

पृष्ठभूमि-आकार की संपत्ति के मूल्यों का विवरण निम्नलिखित है:

लंबाई: इसका उपयोग बैकग्राउंड इमेज की चौड़ाई और ऊंचाई को ठीक करने के लिए किया जाता है।
ढकना: इसका उपयोग पूरे बैकग्राउंड में बैकग्राउंड इमेज को एडजस्ट करने के लिए किया जाता है।

उदाहरण

हम पृष्ठभूमि का आकार 'के रूप में सेट करेंगे' 100% 'ऊंचाई और' 80% ' चौड़ाई:

डिव {

...

पृष्ठभूमि-आकार : 100% 80% ;

}

आप देख सकते हैं कि निर्दिष्ट आयामों के आधार पर छवि का आकार बदल दिया गया है:

सीएसएस पृष्ठभूमि-मूल संपत्ति

' पृष्ठभूमि मूल के संपत्ति का उपयोग पृष्ठभूमि छवि के स्थिति क्षेत्र को समायोजित करने के लिए किया जाता है। छवि को डिफ़ॉल्ट रूप से ऊपरी-बाएँ कोने में समायोजित किया गया है।

वाक्य - विन्यास

बैकग्राउंड-ओरिजिनल प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि मूल के : पैडिंग-बॉक्स| बॉर्डर-बॉक्स | सामग्री बॉक्स

पृष्ठभूमि-मूल गुण के मान नीचे वर्णित हैं:

पैडिंग-बॉक्स: यह पृष्ठभूमि-मूल संपत्ति का डिफ़ॉल्ट मान है जिसका उपयोग पैडिंग किनारे के अनुसार पृष्ठभूमि छवि की स्थिति को समायोजित करने के लिए किया जाता है।
सीमा-बॉक्स: इसका उपयोग इमेज के बॉर्डर-बॉक्स के अनुसार इमेज को सेट करने के लिए किया जाता है।
सामग्री-बॉक्स: इसका उपयोग इमेज की सामग्री के अनुसार बैकग्राउंड इमेज को सेट करने के लिए किया जाता है।

टिप्पणी: यदि बैकग्राउंड-अटैचमेंट प्रॉपर्टी का मान 'के रूप में सेट किया गया है, तो बैकग्राउंड-ओरिजिनल प्रॉपर्टी काम नहीं करती है' हल किया गया '

उदाहरण

सबसे पहले, कंटेनर के चारों ओर एक बॉर्डर बनाएं। यहां, हम पिछले उदाहरण को जारी रखेंगे और पैडिंग मान को ' 10px ' उसके बाद, सीमा की चौड़ाई को “के रूप में समायोजित करें” 15पीएक्स ',' के रूप में शैली चोटी ', और रंग' के रूप में आरजीबी(1, 68, 68) ' अंत में, हम पृष्ठभूमि-मूल संपत्ति के मूल्य को 'के रूप में निर्दिष्ट करेंगे' सामग्री बॉक्स ':

डिव {

...

गद्दी : 10px ;

सीमा : 15पीएक्स चोटी आरजीबी ( 1 , 68 , 68 ) ;

पृष्ठभूमि मूल के : सामग्री बॉक्स ;

}

ऊपर दिए गए कोड का परिणाम नीचे दिया गया है। आप देख सकते हैं कि छवि की स्थिति div की सामग्री के अनुसार निर्धारित की गई है:

सीएसएस पृष्ठभूमि-क्लिप संपत्ति

' पृष्ठभूमि-क्लिप 'गुण तत्व की पृष्ठभूमि के रंग पर काम करता है। यह आपको यह नियंत्रित करने देता है कि पृष्ठभूमि का रंग किसी तत्व से आगे कितनी दूर तक फैला है, जैसे कि तत्व की पैडिंग, उसकी सीमा और उसकी सामग्री।

वाक्य - विन्यास

बैकग्राउंड-क्लिप प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि मूल के : बॉर्डर-बॉक्स | पैडिंग-बॉक्स | सामग्री बॉक्स

पृष्ठभूमि-मूल गुण के मान नीचे वर्णित हैं:

सीमा-बॉक्स: यह बैकग्राउंड-ओरिजिनल प्रॉपर्टी का डिफॉल्ट वैल्यू है जिसका इस्तेमाल बॉर्डर के पीछे बैकग्राउंड कलर सेट करने के लिए किया जाता है।
पैडिंग-बॉक्स: इसका उपयोग तत्व के पैडिंग बॉक्स के भीतर रंग को समायोजित करने के लिए किया जाता है।
सामग्री-बॉक्स: इसका उपयोग तत्व की सामग्री के अनुसार पृष्ठभूमि का रंग सेट करने के लिए किया जाता है।

उदाहरण

हम पिछले उदाहरण को जारी रखेंगे और सीमा शैली के मूल्य को “में बदल देंगे” छितराया हुआ 'पृष्ठभूमि-क्लिप संपत्ति को समझने के लिए। उसके बाद, हम बैकग्राउंड-क्लिप प्रॉपर्टी का मान “के रूप में सेट करेंगे” गद्दी-बॉक्स ':

डिव {

...

पृष्ठभूमि-क्लिप : गद्दी-बॉक्स ;

}

आउटपुट दर्शाता है कि सीमा किनारे समाप्त होने पर सफेद पृष्ठभूमि का रंग दिखाई दे रहा है:

CSS बैकग्राउंड-अटैचमेंट प्रॉपर्टी

' पृष्ठभूमि संलग्न 'प्रॉपर्टी का उपयोग पृष्ठ को स्क्रॉल करते समय व्यवहार या छवि को समायोजित करने के लिए किया जाता है। इसका व्यवहार अन्य तत्वों के साथ स्क्रॉलिंग सेट किया जा सकता है या तय किया जा सकता है।

वाक्य - विन्यास

बैकग्राउंड-अटैचमेंट प्रॉपर्टी का सिंटैक्स है:

पृष्ठभूमि संलग्न : मूल्य

आप बैकग्राउंड-अटैचमेंट का मान “के रूप में सेट कर सकते हैं हल किया गया 'पृष्ठभूमि छवि को ठीक करने के लिए या' स्क्रॉल छवि को पृष्ठ के साथ स्क्रॉल करने की अनुमति देने के लिए।

टिप्पणी: डिफ़ॉल्ट रूप से, बैकग्राउंड-अटैचमेंट प्रॉपर्टी का मान 'के रूप में सेट किया गया है' स्क्रॉल '

यह देखा जा सकता है कि जब हम स्क्रॉल करते हैं तो जोड़ा गया बैकग्राउंड इमेज स्थिर नहीं होता है। आइए अब इस मुद्दे को ठीक करते हैं।

ऐसा करने के लिए, हम बैकग्राउंड-अटैचमेंट प्रॉपर्टी का मान 'के रूप में सेट करते हैं' हल किया गया ':

डिव {

...

पृष्ठभूमि संलग्न : हल किया गया ;

}

यहाँ यह प्रदर्शित करने वाला परिणाम है कि छवि को ठीक कर दिया गया है:

अब, पृष्ठभूमि और पृष्ठभूमि-रंग गुणों के बीच तुलना की ओर बढ़ें।