क्या मैं केवल पैडिंग के लिए बैकग्राउंड कलर जोड़ सकता हूं?

Question

मेरे पास बॉर्डर और पैडिंग सहित एक हेडर बॉक्स है और उस बॉक्स के लिए बैकग्राउंड कलर है, क्या मैं बैकग्राउंड कलर केवल बॉर्डर के बाद गद्देदार क्षेत्र के लिए बदल सकता हूं और फिर बाकी चौड़ाई के लिए समान बैकग्राउंड कलर (दिए गए कोड में ग्रे) ?

कोड की एक चुटकी जहां मुझे गद्देदार पृष्ठभूमि का रंग चाहिए:

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Comments

मुझे ऐसा नहीं लगता, लेकिन मैं गलत साबित होना पसंद करूंगा । (मुझे लगता है कि आपको एक तत्व को घोंसले में डालने की आवश्यकता होगी।)

— डेविड कहते हैं कि मोनिका

नहीं, तुम सही हो डेविड।

— एली गैसेर्ट

@DavidThomas मैं भी यही चाहता हूँ! देखते हैं ..

— पावन नादिग

एलिगासर्ट उम्म .. तो क्या मैं इसके अंदर अलग-अलग रंगों के बॉक्स रख सकता हूं?

— पावन नादिग

मेरे जवाब की जांच कर सकते हैं।

— मुहम्मद उमर

Answer 1

शुद्ध सीएसएस के साथ एक और विकल्प कुछ इस तरह होगा:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

यहां डेमो करें

Comments

आपका छद्म वर्ग तत्व दाईं ओर पैरेंट बॉक्स से आगे निकल जाता है क्योंकिwidth: 100%;

— सिमोन

अब दाईं ओर रिक्ति बहुत बड़ी है, बस चौड़ाई 95% सेट करना बहुत विश्वसनीय नहीं है, खासकर यदि पैडिंग में परिवर्तन होता है। ;)

— सिमोन

@ साइमन यू कृपया समझा सकते हैं कि यू ने कोड क्यों रखा है position:relative;मैं देख सकता हूं कि अगर इसे नहीं रखा गया तो यह स्क्रीन में दिखाई नहीं देता! .. लेकिन यह कैसे काम करता है?

— पावन नादिग

@ पावन नादिग स्थिति सापेक्ष है इसलिए z- इंडेक्स मूल्य को जोड़ा जा सकता है और प्रभावी हो सकता है। जेड-इंडेक्स केवल तैनात तत्वों पर काम करता है।

— गृहनगर

मुझे लगता है कि यहां

— सिमोन

Answer 2

मुझे खेद है कि यह सब सही है, जहां आपको वास्तव में पेडिंग सेट करने की आवश्यकता नहीं है।

http://jsfiddle.net/techsin/TyXRY/1/

मैंने क्या किया है...

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

चतुर अगर मैं अपने आप से ऐसा कहूं।

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Comments

बहुत चालाक। मैंने फिडल को थोड़ा साफ किया है: jsfiddle.net/ilancopelyn/n1ax4qvt

— Ilan

अभी यह jsfiddle.net/TyXRY/123 (123) पर है, लेकिन वे क्या कर रहे हैं या कौन कर रहा है, यह मेरे लिए स्पष्ट नहीं है।

— मुहम्मद उमर

यह मुझे पंसद है। बहुत बुरा मध्य (यानी सामग्री-बॉक्स) पारदर्शी नहीं हो सकता है और अंतर्निहित (जैसे। शरीर) रंग के माध्यम से एक छेद को पंच कर सकता है। जब मैंने यह कोशिश की, तो मैं सिर्फ क्रोम में बाहरी ढाल देखता हूं।

— MSC

जिनियस! क्या इसमें संक्रमण को संलग्न करने का कोई तरीका है? मैंने कोशिश की लेकिन सफल नहीं हुआ।

— गरवानी

transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

— बेनी के

Answer 3

background-clipऔर का उपयोग करेंbox-shadow गुणों का ।

एक सेट background-clip: content-box - यह पृष्ठभूमि को केवल सामग्री तक ही सीमित करता है (पैडिंग और बॉर्डर दोनों को कवर करने के बजाय)

2) एक आंतरिक जोड़ें box-shadow पैडिंग के समान मान में सेट प्रसार त्रिज्या के साथ ।

तो कहते हैं कि गद्दी 10px है - सेट box-shadow: inset 0 0 0 10px lightGreen - जो केवल पैडिंग क्षेत्र को हल्का हरा बना देगा।

कोडपेन डेमो

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

पूरी तरह से इस तकनीक को कवर करने वाले ट्यूटोरियल के लिए इस बेहतरीन सीएसएस-ट्रिक्स पोस्ट को देखें

Comments

क्या 0 0 0मतलब है?

— Nakilon

@ नाकिलोन box-shadowके चार गुण हैं। 0 0 0सेट h-shadow v-shadowऔर blur0 पर, क्षैतिज छाया, ऊर्ध्वाधर छाया, और कलंक दूरी के रूप में इस लागू करने में अनावश्यक कर रहे हैं। यह सिर्फ एक ठोस छाया है जो अंदर की ओर जाती है ( inset) 10px।

— trlkly

सरल अभी तक प्रभावी!

— टाइमगैब

Answer 4

आप उस प्रभाव के लिए पृष्ठभूमि-ग्रेडिएंट का उपयोग कर सकते हैं। अपने उदाहरण के लिए बस निम्नलिखित पंक्तियों को जोड़ें (यह सिर्फ इतना कोड है क्योंकि आपको विक्रेता-उपसर्गों का उपयोग करना होगा):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

आवश्यक मार्कअप की कोई आवश्यकता नहीं है।

यदि आप बस एक दोहरी सीमा रखना चाहते हैं तो आप सीमा और पैडिंग के बजाय रूपरेखा और सीमा का उपयोग कर सकते हैं।

जब आप वांछित प्रभाव को प्राप्त करने के लिए छद्म तत्वों का उपयोग कर सकते हैं, तो मैं इसके खिलाफ सलाह दूंगा। छद्म तत्व एक बहुत शक्तिशाली उपकरण हैं सीएसएस प्रदान करता है, यदि आप उन्हें इस तरह सामान पर "बर्बाद" करते हैं, तो आप शायद कहीं और याद करने वाले हैं।

मैं केवल छद्म तत्वों का उपयोग करता हूं यदि कोई अन्य तरीका नहीं है। इसलिए नहीं कि वे बुरे हैं, बिलकुल विपरीत हैं, क्योंकि मैं अपना जोकर बर्बाद नहीं करना चाहता।

Comments

यदि आप IE9 को अनदेखा कर सकते हैं- आप ग्रेडिएंट्स के साथ ऐसा कर सकते हैं, लेकिन छद्म कक्षाएं IE8 में कम से कम समर्थित हैं।

— सिमोन

यह सच है। लेकिन अगर में thoses मामलों के एक बहुत हैं का उपयोग कर css3pie.com लायक हो सकता है

— डेव

बर्बादी क्या है? क्या छद्म तत्व सीमित समय तक इस्तेमाल होने के लिए प्रतिबंधित हैं?

— अनवर

हां, वे सीमित हैं। आपके पास प्रत्येक तत्व के लिए 2 है (1x :: पहले, 1x :: बाद)।

— डेव

Answer 5

जवाब ने कहा कि सभी संभव समाधान

मेरे पास BOX-SHADOW के साथ एक और है

यहाँ यह JSFIDDLE है

और कोड

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

यह IE9 में भी समर्थन करता है, इसलिए यह ढाल समाधान से बेहतर है, अधिक समर्थन के लिए उचित उपसर्ग जोड़ें

IE8 यह समर्थन नहीं है, क्या शर्म की बात है!

Answer 6

आप गद्दी का रंग सेट नहीं कर सकते।

आपको वांछित पृष्ठभूमि रंग के साथ एक आवरण तत्व बनाना होगा। इस तत्व में बॉर्डर जोड़ें और इसे पेडिंग सेट करें।

एक उदाहरण के लिए यहां देखें: http://jsbin.com/abanek/1/edit

Comments

वास्तव में आप (आजकल) कर सकते हैं - एक महान स्पष्टीकरण के लिए इस महान सीएसएस-ट्रिक पोस्ट को देखें

— Danield

Answer 7

यह एक उचित सीएसएस समाधान होगा जो IE8 / 9 के लिए भी काम करता है (IE8 html5shiv ofcourse के साथ): कोडपेट

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Answer 8

ऐसा करने के लिए कोई सटीक कार्यक्षमता नहीं है।

किसी अन्य तत्व को अंदर लपेटे बिना, आप बॉर्डर को बॉक्स-शैडो द्वारा और बॉर्डर को पैडिंग द्वारा प्रतिस्थापित कर सकते हैं। लेकिन याद रखें कि बॉक्स-छाया तत्व के आयामों को नहीं जोड़ता है।

jsfiddle वास्तव में धीमा है, अन्यथा मैं एक उदाहरण जोड़ूंगा।

Answer 9

मैं सिर्फ हेडर को एक और div के साथ लपेटता हूं और सीमाओं के साथ खेलता हूं।

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

सीएसएस:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Comments

यह अच्छा है .. वैसे, मैंने पूरे बॉक्स का उपयोग किया है <nav>, मैं इसमें कक्षाएं कैसे जोड़ सकता हूं?

— पावन नादिग

मेरा मानना ​​है <nav>कि कक्षाएं हो सकती हैं। @Mookamafoob उत्तर पर एक नज़र डालें। मैं वास्तव में इसे वैसा नहीं करूंगा जैसा कि मैं ब्राउज़र समर्थन के बारे में चिंतित हूं। लेकिन अगर आप HTML5 / CSS3 पसंद करते हैं, तो यह करने का तरीका है।

— rlatief

Answer 10

आप निम्नानुसार पैडिंग पर एक div कर सकते हैं:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

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

PS divs html हैं और #paddingOne और #paddingTwo css हैं (यदि किसी को ऐसा नहीं लगा तो :)