css - tutorial - w3schools html




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

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

1) सेट background-clip: content-box - यह बैकग्राउंड को केवल कंटेंट तक ही सीमित रखता है (बजाय पैडिंग और बॉर्डर दोनों को कवर करने के)

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

तो कहते हैं कि गद्दी 10px है - सेट box-shadow: inset 0 0 0 10px lightGreen - जो केवल पैडिंग क्षेत्र को हल्का हरा 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>

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

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

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

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

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

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);

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

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

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

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


आप निम्नानुसार पैडिंग पर एक 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 सीएसएस हैं (यदि किसी को ऐसा नहीं लगा तो :)


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

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

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


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

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;
}

मैं सिर्फ हेडर को एक और 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; }

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

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;
}

here डेमो here







css