मुझे मिलने वाले सबसे आम CSS प्रश्नों में से एक यह है कि CSS में बैकग्राउंड और बैकग्राउंड-कलर में क्या अंतर है? भ्रमित करने का कारण यह है कि आप अक्सर डेवलपर्स को background-color . का उपयोग करते हुए देखते हैं और background जब वे किसी तत्व पर पृष्ठभूमि रंग लागू करते हैं, तो एक दूसरे के स्थान पर।
लेकिन वे समान नहीं हैं। background (बिना -रंग) संपत्ति कर सकते हैं सभी . सेट करने के लिए उपयोग किया जा सकता है एक घोषणा में किसी तत्व के लिए पृष्ठभूमि गुण। उदाहरण के लिए, आप एक पृष्ठभूमि रंग, एक बार प्रदर्शित होने वाली छवि (नो-रिपीट) और एक एकल घोषणा में एक तत्व के लिए एक छवि स्थिति दोनों जोड़ना चाह सकते हैं, जैसे:
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 संपत्ति को एक सुविधाजनक शॉर्ट-हैंड के रूप में इस्तेमाल किया जा सकता है जो एक पंक्ति में कई घोषणाओं को लागू कर सकता है, और आपको कोड की कई पंक्तियों को सहेज सकता है।
घोषणा =सीएसएस संपत्ति + मूल्य।
background-color दूसरी ओर, संपत्ति केवल पृष्ठभूमि सेट कर सकती है रंग एक तत्व का। यह बड़े background . के उपसमुच्चय (एक भाग) की तरह है संपत्ति।
महत्वपूर्ण:पृष्ठभूमि संपत्ति सभी पिछली घोषणाओं को रीसेट कर देगी - सावधान रहें !
यदि आपने पहले किसी तत्व पर विभिन्न पृष्ठभूमि घोषणाएं लागू की हैं, उदा। background-color या background-image , और फिर बाद में एक background: red . जोड़ें एक ही तत्व के लिए घोषणा, आपकी पिछली सभी घोषणाएं रीसेट हो जाएंगी, और अब आपके तत्व की पृष्ठभूमि लाल है, और आपकी पृष्ठभूमि छवि चली गई है।
उदाहरण
इस पेन उदाहरण पर एक नज़र डालें, जहां हमारे पास तीन div हैं समान .box . वाले तत्व कक्षा। पहले तत्व में केवल .box . होता है class लेकिन अन्य के पास .bg-red . का एक उपयोगिता (सहायक) वर्ग भी है और .bg-blue क्रमशः।
से कोडपेन उदाहरण।
अंतर देखें?
दूसरा बॉक्स बिल्कुल लाल है, कोई छवि नहीं है, भले ही उसका .box . है class स्पष्ट रूप से निर्दिष्ट करता है कि इसमें दो अन्य तत्वों के समान JS छवि होनी चाहिए।
एचटीएमएल
<div class="box">
</div>
<div class="box bg-red">
</div>
<div class="box bg-blue">
</div>सीएसएस
.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 . का उपयोग करता है ।
background .bg-red . पर संपत्ति वर्ग बस दूसरे div तत्व पर हर दूसरी पृष्ठभूमि घोषणा को हटा देता है:यहाँ -image , -repeat , -color और फिर निर्दिष्ट red जोड़ता है मान उस तत्व के लिए एकल पृष्ठभूमि विशेषता के रूप में।
इसलिए, यदि आप केवल प्रभावित . करना चाहते हैं विशिष्ट तत्वों के पृष्ठभूमि रंग, सुनिश्चित करें कि आप background-color . का उपयोग करते हैं , नहीं background या आप उस तत्व पर किसी भी पिछली पृष्ठभूमि-घोषणाओं को अधिलेखित कर देंगे।
कभी-कभी, रीसेट करना पिछली सभी घोषणाएं ठीक वही हो सकती हैं जो आप करना चाहते हैं। आप एक ऐसी वेबसाइट पर काम कर रहे होंगे जिसमें लीगेसी कोड का एक गुच्छा है जिसे छूने की अनुमति नहीं है (या हाहा करना चाहते हैं) लेकिन आप एक विशिष्ट तत्व में हेरफेर करना चाहते हैं जिसमें पहले से ही घोषणाओं का एक समूह है जिसे आपको बदलने की आवश्यकता है। नया एकवचन घोषणा मूल्य, उदा। रंग - उसके लिए, background . का उपयोग करके एक उत्कृष्ट उपकरण है।