पृष्ठभूमि: कोई नहीं पृष्ठभूमि: पारदर्शी क्या अंतर है?


119

क्या इन दो सीएसएस गुणों के बीच अंतर है :

background: none;
background: transparent;
  1. क्या वे दोनों वैध हैं?
  2. किसका उपयोग किया जाना चाहिए और क्यों?

जवाबों:


111

उनमें कोई अंतर नहीं है।

यदि आप उन आधा दर्जन संपत्तियों में से किसी के लिए एक मूल्य निर्दिष्ट नहीं करते हैं background, जो उसके लिए शॉर्टहैंड है, तो यह उसके डिफ़ॉल्ट मान पर सेट है। noneऔर transparentचूक हैं।

एक स्पष्ट रूप से सेट करता background-imageहै noneऔर अंतर्निहित रूप से सेट करता background-colorहै transparent। दूसरा दूसरा रास्ता है।


2
@ हर्मन - नहीं, वे नहीं कर सकते। यह भी ऐसा ही है background-color: transparent; background-image: none;। एक उपयोगकर्ता स्टाइलशीट उन सभी मूल्यों में से एक या दोनों को ओवरराइड कर सकती है, लेकिन यह बिल्कुल वैसा ही करेगी जैसे कि background-color: transparent; background-image: none;स्पष्ट रूप से लिखा गया हो।
क्वेंटिन

तो, आप कह रहे हैं "प्रारंभिक" संपत्ति मूल्य (जो अनिर्दिष्ट गुणों के लिए उपयोग किया जाता है) यहां तक ​​कि उपयोगकर्ता एजेंट स्टाइलशीट को ओवरराइड करता है? क्या आपके पास कोई संदर्भ है?
हरमन

उपयोगकर्ता एजेंट स्टाइलशीट कल्पना को लागू करते हैं, जो उन गुणों के प्रारंभिक संपत्ति मूल्य को परिभाषित करता है transparentऔर none
क्वेंटिन

63

@Quentin के उत्तर के बारे में जानकारी के अनुसार , और जैसा कि वह सही कहता है, backgroundसीएसएस संपत्ति ही, के लिए एक आशुलिपि है:

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

इसका मतलब है, आप सभी शैलियों को एक में रख सकते हैं, जैसे:

background: red url(../img.jpg) 0 0 no-repeat fixed;

यह (इस उदाहरण में) होगा:

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

इसलिए ... जब आप सेट background:none;
करते हैं : आप कह रहे हैं कि सभी पृष्ठभूमि गुण किसी के लिए सेट नहीं हैं ...
आप कह रहे हैं कि background-image: none;और सभी अन्य लोगों को initialराज्य (जैसा कि वे घोषित नहीं किया जा रहा है)।
तो, background:none;है:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

अब, जब आप केवल रंग (आपके मामले में transparent) को परिभाषित करते हैं तो आप मूल रूप से कह रहे हैं:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

मैं दोहराता हूं, जैसा कि @Quentin सही कहता है default transparentऔर इस मामले मेंnone मूल्य समान हैं, इसलिए आपके उदाहरण में और आपके मूल प्रश्न के लिए, नहीं, उनके बीच कोई अंतर नहीं है।

लेकिन! .. अगर आप background:noneVs Vs background:redहाँ कहते हैं ... एक बड़ा अंतर है, जैसा कि मैं कहता हूं, पहला सभी गुणों को सेट करेगा none/defaultऔर दूसरा, केवल बदलेगा colorऔर बाकी की defaultस्थिति में रहेगा ।

तो संक्षेप में:

संक्षिप्त उत्तर : नहीं, इसमें कोई अंतर नहीं है (आपके उदाहरण और मूल प्रश्न में)
दीर्घ उत्तर : हां, एक बड़ा अंतर है, लेकिन विशेषता के लिए दिए गए गुणों पर सीधे निर्भर करता है।


Update1: प्रारंभिक मूल्य (उर्फ default)

प्रारंभिक मूल्य इसके longhand गुणों के प्रारंभिक मूल्यों के संघनन:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

अधिक backgroundविवरण यहां देखें


अपडेट 2: बेहतर background:none;विनिर्देश को स्पष्ट करें ।


उत्तर के लिए thx पृष्ठभूमि-छवि, पृष्ठभूमि दोहराने के लिए डिफ़ॉल्ट मान क्या हैं ...? क्या वे ब्राउज़र पर निर्भर हैं? यदि मैं आपकी व्याख्या को समझता हूं, तो पृष्ठभूमि का उपयोग करना बेहतर है: कोई भी मान डिफ़ॉल्ट पर सेट नहीं है?
वेब-टिकी

क्या आपने पोस्ट करने की कोशिश की है ?? क्या सभी मूल्य किसी के पास नहीं हैं? consoleइस डेमो पर देखें jsfiddle.net/dnzy2/6
DaniP

जब आप सेट करते हैं: पृष्ठभूमि: कोई नहीं; आप कह रहे हैं कि सभी पृष्ठभूमि गुण किसी के लिए भी निर्धारित नहीं हैं ... गलत कहने का एक तरीका गलत नहीं है
DaniP

2
+1, यह स्वीकृत उत्तर होना चाहिए (यदि यह सही है)।
पैसिफायर

7

अन्य उत्तर की मदद के लिए: यदि आप अपने प्रारंभिक मूल्य के लिए सभी पृष्ठभूमि गुण (जो भी शामिल है रीसेट करना चाहते हैं background-color: transparentऔर background-image: noneस्पष्ट रूप से इस तरह के रूप में किसी भी मूल्य निर्धारित किए बिना) transparentया none, आप लेखन करके कर सकते हैं:

background: initial;

5
सावधान रहें, IE समर्थन नहीं करता है initial। देख सकते हैं मैं उपयोग और MDN
chharvey
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.