पृष्ठभूमि और पृष्ठभूमि-रंग के बीच अंतर क्या है

Question

एक पृष्ठभूमि रंग का उपयोग करके निर्दिष्ट करने के बीच अंतर क्या है backgroundऔर background-color?

स्निपेट # 1

body { background-color: blue; }

स्निपेट # 2

body { background: blue; }

Answer 1

यह देखते हुए कि वे दो विशिष्ट गुण हैं, आपके विशिष्ट उदाहरण में परिणाम में कोई अंतर नहीं है, क्योंकि backgroundवास्तव में इसके लिए एक आशुलिपि है

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

इस प्रकार, शॉर्टकट के अलावा background-color, backgroundआप एक से अधिक background-*बार किसी अन्य संपत्ति को दोहराए बिना एक या अधिक मान जोड़ सकते हैं ।

कौन सा चुनना है यह अनिवार्य रूप से आप पर निर्भर करता है, लेकिन यह आपकी शैली की घोषणाओं की विशिष्ट स्थितियों पर भी निर्भर हो सकता है (जैसे कि अगर आपको मूल तत्व से background-colorअन्य संबंधित background-*गुणों को विरासत में प्राप्त करने की आवश्यकता है, या यदि आपको सभी मूल्यों को हटाने की आवश्यकता है को छोड़कर background-color)।

Comments

तो background5 विशेषताओं में से किसी के लिए सिर्फ एक शॉर्टकट है? इसलिए वास्तविक जीवन में व्यावहारिक नहीं है अगर पृष्ठभूमि की स्थिति, रंग और छवि हैं?

— stanigator

यह बहुत व्यावहारिक है, क्योंकि आप उन सभी विशेषताओं को एक पंक्ति में निर्दिष्ट कर सकते हैं । आधिकारिक दस्तावेज का

— क्रिश्चियन

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

— user1873073

Fwiw, @ ChristianVarga के लिंक से: 'बैकग्राउंड' प्रॉपर्टी अलग-अलग बैकग्राउंड प्रॉपर्टीज़ (यानी, 'बैकग्राउंड-कलर', 'बैकग्राउंड-इमेज', 'बैकग्राउंड-रिपीट', 'बैकग्राउंड-अटैचमेंट') और एक शॉर्टहैंड प्रॉपर्टी है। शैली पत्रक में एक ही स्थान पर पृष्ठभूमि-स्थिति ')। एक वैध घोषणा को देखते हुए, 'पृष्ठभूमि' संपत्ति पहले सभी व्यक्तिगत पृष्ठभूमि गुणों को उनके प्रारंभिक मूल्यों पर सेट करती है, फिर घोषणा में दिए गए स्पष्ट मान प्रदान करती है। उदाहरण दिया गया:P { background: url("chess.png") gray 50% repeat fixed }

— रफिन

पर अधिक जानकारी developer.mozilla.org/en-US/docs/Web/CSS/background

— MarcoZen

Answer 2

backgroundसभी पिछले supercede होगा background-color, background-imageआदि विनिर्देशों। यह मूल रूप से एक आशुलिपि है, लेकिन एक रीसेट भी।

मैं कभी-कभी इसका उपयोग backgroundखाके के अनुकूलन में पिछली विशिष्टताओं को अधिलेखित करने के लिए करूँगा , जहाँ मैं निम्नलिखित चाहता हूँ:

background: white url(images/image1.jpg) top left repeat;

निम्नलिखित होने के लिए:

background: black;

तो, सभी मापदंडों ( background-image, background-position, background-repeat) उनके डिफ़ॉल्ट मानों के सेट हो जाएंगे।

Comments

यह एक अधिक पूर्ण उत्तर है, रीसेट भाग बहुत महत्वपूर्ण अंतर है।

— ड्रेकन

developer.mozilla.org/en-US/docs/Web/CSS/background -> सभी css आशुलिपि गुणों के साथ, कोई भी उप-मान उनके प्रारंभिक मान> पृष्ठभूमि-छवि: कोई भी पृष्ठभूमि-स्थिति: 0% पर सेट किया जाएगा 0% पृष्ठभूमि-आकार: ऑटो ऑटो बैकग्राउंड-रिपीट: रिपीट बैकग्राउंड-ओरिजिन: पैडिंग-बॉक्स बैकग्राउंड-क्लिप: बॉर्डर-बॉक्स बैकग्राउंड-अटैचमेंट: स्क्रॉल बैकग्राउंड-कलर: ट्रांसपेरेंट

— मार्कोज़ेन

Answer 3

CSS प्रदर्शन के बारे में :

backgroundबनाम background-color:

18 रंग के स्वैच की तुलना एक पृष्ठ पर 100 बार छोटे आयतों के रूप में की जाती है, एक बार पृष्ठभूमि के साथ और एक बार पृष्ठभूमि-रंग के साथ ।

हालांकि ये संख्याएँ एक ही पृष्ठ के पुनः लोड से हैं, बाद के रिफ्रेश के साथ रेंडर बार बदल गए, लेकिन प्रतिशत अंतर मूल रूप से हर बार समान था।

सफारी 7.0.1 में पृष्ठभूमि-रंग के बजाय पृष्ठभूमि का उपयोग करते समय , लगभग 42.6ms की बचत होती है । क्रोम 33 उसी के बारे में प्रतीत होता है।

इसने ईमानदारी से मुझे उड़ा दिया क्योंकि सबसे लंबे समय तक दो कारणों से:

• मैं आमतौर पर सीएसएस गुणों में खोजकर्ता के लिए हमेशा बहस करता हूं, खासकर पृष्ठभूमि के साथ क्योंकि यह सड़क की विशिष्टता को प्रतिकूल रूप से प्रभावित कर सकता है।
• मैंने सोचा कि जब कोई ब्राउज़र देखता है background: #000;, तो वे वास्तव में देखते हैं background: #000 none no-repeat top center;। मेरे पास यहां संसाधन के लिए लिंक नहीं है, लेकिन मुझे याद है कि यह कहीं पढ़ना है।

Ref: https://github.com/mdo/css-perf#background-vs-background-color

Comments

मैं इसके लिए यहां आया था - वास्तव में, वास्तव में परिणामों से हैरान हूं । इस उत्तर के लिए धन्यवाद।

— Mave

क्या आप यह भी कह सकते हैं कि बेहतर प्रदर्शन के कारण सभी CSS शॉर्टहैंड अधिक बेहतर हैं?

— लेवेंट डिविलीग्लू

@LeventDivilioglu परीक्षक के रूप में कहा: These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusions-from-aactions

— l2aelba

Answer 4

आपके साथ backgroundसभी backgroundगुण सेट कर सकते हैं जैसे:

• background-color
• background-image
  
• background-repeat
  
• background-position
  आदि।

---

साथ background-colorतुम सिर्फ पृष्ठभूमि का रंग निर्दिष्ट कर सकते हैं

background: url(example.jpg) no-repeat center center #fff;

बनाम

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

---

और जानकारी

(कैप्शन देखें: पृष्ठभूमि - आशुलिपि संपत्ति)

Answer 5

अंतर में से एक:

यदि आप इस तरह से पृष्ठभूमि के रूप में एक छवि का उपयोग करते हैं:

background: url('Image Path') no-repeat;

तब आप इसे "पृष्ठभूमि-रंग" संपत्ति के साथ ओवरराइड नहीं कर सकते।

लेकिन अगर आप कलर लगाने के लिए बैकग्राउंड का इस्तेमाल कर रहे हैं, तो यह बैकग्राउंड-कलर जैसा ही है और इसे ओवरराइड किया जा सकता है।

जैसे: http://jsfiddle.net/Z57Za/11/ और http://jsfiddle.net/Z57Za/12/

Answer 6

वे दोनों एक ही हैं। एक से अधिक कर रहे हैं पृष्ठभूमि चयनकर्ताओं (यानी background-color, background-image, background-position) और आप सरल के माध्यम से या तो उन तक पहुँच सकते backgroundचयनकर्ता या अधिक विशिष्ट है। उदाहरण के लिए:

background: blue url(/myImage.jpg) no-repeat;

या

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Answer 7

अंतर यह है कि backgroundआशुलिपि संपत्ति कई पृष्ठभूमि से संबंधित गुण सेट करती है। यह उन सब को निर्धारित करता है, भले ही आप केवल तब से अन्य संपत्तियों उनकी प्रारंभिक मान, जैसे की तैयारी में हैं निर्दिष्ट जैसे एक रंग मूल्य, background-imageकरने के लिए none।

इसका मतलब यह नहीं है कि यह हमेशा उन गुणों के लिए किसी अन्य सेटिंग्स को ओवरराइड करेगा। यह कैस्केड पर सामान्य, आमतौर पर गलत समझा नियमों के अनुसार निर्भर करता है।

व्यवहार में, आशुलिपि कुछ हद तक सुरक्षित हो जाती है। यह एक एहतियात (पूर्ण, लेकिन उपयोगी नहीं) है जो गलती से कुछ अनपेक्षित पृष्ठभूमि गुणों, जैसे कि पृष्ठभूमि छवि, किसी अन्य शैली की शीट से प्राप्त कर रहा है। इसके अलावा, यह छोटा है। लेकिन आपको यह याद रखना चाहिए कि इसका वास्तव में मतलब है "सभी पृष्ठभूमि गुणों को सेट करें"।

Answer 8

इसमें कोई फर्क नही है। दोनों एक ही तरीके से काम करेंगे।

सीएसएस पृष्ठभूमि गुणों का उपयोग किसी तत्व के पृष्ठभूमि प्रभाव को परिभाषित करने के लिए किया जाता है।

पृष्ठभूमि प्रभावों के लिए इस्तेमाल सीएसएस गुण:

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

पृष्ठभूमि की संपत्ति में यह सभी गुण शामिल हैं और आप उन्हें केवल एक पंक्ति में लिख सकते हैं।

Answer 9

यह सबसे अच्छा जवाब है। आशुलिपि (पृष्ठभूमि) रीसेट और DRY (लंबे समय के साथ गठबंधन) के लिए है।

Answer 10

18 रंग के स्वैच की तुलना एक पृष्ठ पर 100 बार छोटे आयतों के रूप में की जाती है, एक बार पृष्ठभूमि के साथ और एक बार पृष्ठभूमि-रंग के साथ।

मैंने CSS प्रदर्शन प्रयोग को फिर से बनाया और परिणाम आजकल काफी भिन्न हैं।

background

Chrome 54 : 443 ()s / div)

फ़ायरफ़ॉक्स 49 : 162 (µs / div)

एज 10 : 56 (divs / div)

background-color

Chrome 54 : 449 (divs / div)

फ़ायरफ़ॉक्स 49 : 171 (divs / div)

एज 10 : 58 (divs / div)

जैसा कि आप देखते हैं - लगभग कोई अंतर नहीं है।

Answer 11

backgroundbackground-colorनीचे के रूप में पृष्ठभूमि और कुछ अन्य संबंधित सामान के लिए शॉर्टकट है :

background-color
background-image
background-repeat
background-attachment
background-position 

W3C से नीचे का कथन पढ़ें:

पृष्ठभूमि - आशुलिपि संपत्ति

कोड को छोटा करने के लिए, एक ही संपत्ति में सभी पृष्ठभूमि गुणों को निर्दिष्ट करना भी संभव है। इसे शॉर्टहैंड प्रॉपर्टी कहा जाता है।

पृष्ठभूमि के लिए आशुलिपि संपत्ति पृष्ठभूमि है:

body {
  background: white url("img_tree.png") no-repeat right top;
}

आशुलिपि संपत्ति का उपयोग करते समय संपत्ति मूल्यों का क्रम है:

background-color
background-image
background-repeat
background-attachment
background-position

इससे कोई फर्क नहीं पड़ता कि संपत्ति का एक मान गायब है, जब तक कि अन्य इस क्रम में हैं।

Answer 12

मैंने पाया है कि आप पृष्ठभूमि-रंग के साथ एक ढाल सेट नहीं कर सकते।

यह काम:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

यह नहीं है:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Answer 13

background निम्नलिखित के लिए आशुलिपि संपत्ति है:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

आप यहाँ हर संपत्ति के बारे में विस्तृत जानकारी दे सकते हैं

गुण क्रम

अधिकांश ब्राउज़र कार्यान्वयन में (मुझे लगता है कि शायद पुराने ब्राउज़र समस्याएँ प्रस्तुत कर सकते हैं) गुणों का क्रम मायने नहीं रखता, सिवाय इसके:

• background-originऔर background-clip: जब यह दोनों गुण मौजूद होते हैं, तो पहले का उल्लेख होता है -originऔर दूसरे का -clip।

  उदाहरण:

  background: content-box green padding-box;

  के बराबर है:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeहमेशा पालन करना चाहिए background-positionऔर गुणों को अलग करना चाहिए/

• यदि background-positionदो संख्याओं से बना है, तो पहला क्षैतिज मूल्य है और दूसरा ऊर्ध्वाधर मूल्य है।

Answer 14

मैंने देखा है जब आउटलुक के लिए ईमेल उत्पन्न कर रहा है ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Answer 15

एक बार जब आप समझ जाते हैं कि आप इस के साथ विरासत के साथ खेल सकते हैं, तो आप कुछ बहुत साफ-सुथरा सामान कर सकते हैं। हालांकि पहले पृष्ठभूमि पर इस डॉक्टर से कुछ समझते हैं :

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

तो जब एक करें:

background: red;

वह पृष्ठभूमि-रंग को लाल करने के लिए सेट कर रहा है क्योंकि लाल अंतिम मूल्य सूचीबद्ध है।

जब एक करें:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

लाल एक बार फिर से पृष्ठभूमि का रंग है , लेकिन यदि आप एक ढाल देखेंगे।

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

अब पृष्ठभूमि-रंग के साथ एक ही बात:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

ऐसा होने का कारण यह है कि जब हम ऐसा कर रहे हैं:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

अंतिम संख्या पृष्ठभूमि-रंग सेट करती है।

फिर पहले हम पृष्ठभूमि से विरासत में मिल रहे हैं (तब हमें ढाल मिलती है) या पृष्ठभूमि का रंग, फिर हम लाल हो जाते हैं।

Answer 16

एक चीज़ जो मैंने देखी है कि मैं प्रलेखन में नहीं देख रहा हूँ का उपयोग कर रहा है background: url("image.png")

ऊपर की तरह छोटा हाथ अगर छवि नहीं मिली है तो इसे अनदेखा किए जाने के बजाय 302 कोड भेजा जाता है जैसे कि आप उपयोग करते हैं

background-image: url("image.png") 

Answer 17

पृष्ठभूमि और पृष्ठभूमि-रंग के संबंध में एक बग है

इस का अंतर, पृष्ठभूमि का उपयोग करते समय, कभी-कभी जब आप CSS पृष्ठभूमि में एक वेबपेज बनाते हैं: #fff // मास्क छवि ("शीर्ष आइटम, पाठ या छवि") के एक ब्लॉक की सवारी कर सकते हैं) तो इसकी बेहतर पृष्ठभूमि हमेशा उपयोग करने के लिए- सुरक्षित उपयोग के लिए रंग, अपने डिजाइन में अगर इसकी व्यक्तिगत

Comments

क्षमा करें कि समझ में नहीं आता है। क्या आप उस पर अधिक विस्तार से अपना उत्तर संपादित कर सकते हैं?

— सेफ़र