CSS के बारे में सबसे आम सवालों में से एक यह है कि background और background-color में क्या अंतर है? यह भ्रम इसलिए होता है क्योंकि आप अक्सर डेवलपर्स को एलिमेंट पर बैकग्राउंड कलर लागू करते समय इन दोनों का परस्पर उपयोग करते देखते हैं।
लेकिन ये दोनों समान नहीं हैं। background (बिना -color के) प्रॉपर्टी का उपयोग एक ही डिक्लेरेशन में एलिमेंट के सभी बैकग्राउंड प्रॉपर्टीज़ को सेट करने के लिए किया जा सकता है। उदाहरण के लिए, आप एक ही डिक्लेरेशन में बैकग्राउंड कलर, एक इमेज (जो एक बार प्रदर्शित हो, no-repeat), और इमेज की पोजीशन जोड़ना चाह सकते हैं:
background: #444 url("image.jpg") no-repeat left top;उपरोक्त को इस तरह भी लिखा जा सकता है:
background-image: url("url/image.jpg");
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-color: #444;तो background प्रॉपर्टी एक सुविधाजनक शॉर्टहैंड के रूप में काम करती है जो एक लाइन में कई डिक्लेरेशन लागू कर सकती है, और आपको कई लाइनों के कोड से बचाती है।
डिक्लेरेशन = CSS प्रॉपर्टी + वैल्यू।
दूसरी ओर, background-color प्रॉपर्टी केवल एलिमेंट का बैकग्राउंड कलर सेट कर सकती है। यह बड़ी background प्रॉपर्टी का एक सबसेट (हिस्सा) है।
महत्वपूर्ण: background प्रॉपर्टी पिछले सभी डिक्लेरेशन को रीसेट कर देती है — सावधान रहें!
अगर आपने पहले किसी एलिमेंट पर विभिन्न बैकग्राउंड डिक्लेरेशन लागू किए हैं, जैसे background-color या background-image, और बाद में उसी एलिमेंट पर background: red डिक्लेरेशन जोड़ते हैं, तो आपके सभी पिछले डिक्लेरेशन रीसेट हो जाएंगे, और अब आपके एलिमेंट का बैकग्राउंड लाल होगा, और आपकी बैकग्राउंड इमेज गायब हो जाएगी।
उदाहरण
इस CodePen उदाहरण को देखें, जहां हमारे पास समान .box क्लास वाले तीन div एलिमेंट हैं। पहले एलिमेंट में केवल .box क्लास है लेकिन अन्य दो में क्रमशः यूटिलिटी (हेल्पर) क्लास .bg-red और .bg-blue भी हैं।
CodePen उदाहरण देखें।
क्या अंतर नजर आया?
दूसरा बॉक्स पूरी तरह लाल है, इसमें कोई इमेज नहीं है, भले ही इसकी .box क्लास स्पष्ट रूप से निर्दिष्ट करती है कि इसमें अन्य दो एलिमेंट्स की तरह ही JS इमेज होनी चाहिए।
HTML
<div class="box"> </div>
<div class="box bg-red"> </div>
<div class="box bg-blue"> </div>CSS
.box {
margin: 1rem;
height: 100px;
width: 150px;
background-color: black;
background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
background-repeat: no-repeat;
}
.bg-red { background: red; }
.bg-blue { background-color: blue; }CSS को ध्यान से देखें, और .bg-red और .bg-blue प्रॉपर्टीज़ की तुलना करें। लाल क्लास 'मास्टर' (ऑल-इन-वन) background प्रॉपर्टी का उपयोग करके लाल कलर वैल्यू सेट करती है, जबकि नीली क्लास सिंगल-पर्पस background-color का उपयोग करती है।
.bg-red क्लास पर background प्रॉपर्टी केवल दूसरे डिव एलिमेंट पर हर दूसरे बैकग्राउंड डिक्लेरेशन को हटा देती है: यहां -image, -repeat, -color और फिर उस एलिमेंट के लिए निर्दिष्ट red वैल्यू को एकमात्र बैकग्राउंड एट्रिब्यूट के रूप में जोड़ देती है।
इसलिए, यदि आप केवल विशिष्ट एलिमेंट्स के बैकग्राउंड कलर को प्रभावित करना चाहते हैं, तो सुनिश्चित करें कि आप background-color का उपयोग करें, background का नहीं, अन्यथा आप उस एलिमेंट पर पिछले सभी बैकग्राउंड- डिक्लेरेशन को ओवरराइट कर देंगे।
कभी-कभी, सभी पिछले डिक्लेरेशन को रीसेट करना वही हो सकता है जो आप करना चाहते हैं। आप किसी ऐसी वेबसाइट पर काम कर रहे होंगे जिसमें बहुत सारा लिगेसी कोड है जिसे आप छूने की अनुमति नहीं है (या नहीं चाहते) लेकिन आप एक विशिष्ट एलिमेंट को मैनिपुलेट करना चाहते हैं जिसमें पहले से ही कई डिक्लेरेशन हैं जिन्हें आप एक नई एकल डिक्लेरेशन वैल्यू से बदलना चाहते हैं, जैसे कलर — इसके लिए background का उपयोग एक उत्कृष्ट उपकरण है।
