पृष्ठभूमि-क्लिप - सीएसएस-ट्रिक्स

Anonim

background-clip आपको यह नियंत्रित करने देता है कि किसी तत्व की गद्दी या सामग्री से परे पृष्ठभूमि की छवि या रंग कितना विस्तृत है।

.frame ( background-clip: padding-box; )

मूल्यों

  • border-boxडिफ़ॉल्ट मान है। यह पृष्ठभूमि को तत्व की सीमा के बाहरी किनारे तक सभी तरह से विस्तारित करने की अनुमति देता है।
  • padding-box तत्व के पैडिंग के बाहर किनारे पर पृष्ठभूमि को क्लिप करता है और इसे सीमा में विस्तारित नहीं होने देता है।
  • content-boxसामग्री बॉक्स के किनारे पर पृष्ठभूमि को क्लिप करता है।
  • inheritbackground-clipचयनित तत्व के लिए माता-पिता की सेटिंग लागू होती है ।

क़ौम

background-clip कार्रवाई में सबसे अच्छा समझाया गया है, इसलिए हमने यह दिखाने के लिए दो डेमो को एक साथ रखा है कि यह कैसे काम करता है।

पहले डेमो में, प्रत्येक div के अंदर एक पैराग्राफ होता है। पैराग्राफ div की सामग्री है। प्रत्येक div में एक पीले रंग की पृष्ठभूमि और 5 पिक्सेल, अर्ध-पारदर्शी हल्के नीले रंग की सीमा होती है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड-क्लिप देखें।

डिफ़ॉल्ट रूप से, या background-clip: border-boxसेट के साथ , पीले रंग की पृष्ठभूमि सीमा के बाहरी किनारे तक सभी तरह से फैली हुई है। ध्यान दें कि नीचे की तरफ पीले बैकग्राउंड के कारण बॉर्डर कैसा दिखता है यह हरा है।

जब background-clipइसे बदल दिया जाता है padding-box, तो पृष्ठभूमि रंग बंद हो जाता है जहां तत्व की पैडिंग समाप्त हो जाती है। ध्यान दें कि बॉर्डर नीला है, क्योंकि बैकग्राउंड को बॉर्डर में ब्लीड करने की अनुमति नहीं है।

के साथ background-clip: content-box, पृष्ठभूमि रंग केवल div की सामग्री पर लागू होता है, इस मामले में एकल पैरा तत्व। Div की पैडिंग और बॉर्डर का बैकग्राउंड कलर नहीं है। लेकिन, उल्लेख के लायक एक छोटा सा विवरण है: रंग सामग्री के मार्जिन में विस्तार करता है। पहले और दूसरे उदाहरणों के बीच के अंतर को देखें content-box।

पहले content-boxउदाहरण में, ब्राउज़र के डिफ़ॉल्ट मार्जिन को पैराग्राफ पर लागू किया जाता है, और मार्जिन के बाद की पृष्ठभूमि क्लिप। दूसरे उदाहरण में, सीएसएस में मार्जिन 0 पर सेट किया गया है, और पृष्ठभूमि को टेक्स्ट के किनारे पर क्लिप किया गया है।

यह अगली इंटरैक्टिव background-clipपृष्ठभूमि छवि के साथ दिखाता है । इस डेमो में सामग्री एक छोटा सा खाली div है।

CodePen पर टिमोथी मिलर (@tjacobdesign) द्वारा पेन बैकग्राउंड-क्लिप इंटरएक्टिव उदाहरण देखें।

यह डेमो भी लागू होता है background-size: coverऔर पृष्ठभूमि छवि को नियंत्रित background-repeat: no-repeatकरने के background-clipलिए, जो अन्यथा क्लिपिंग तक दोहराता है।

टेक्स्ट

इसका एक विक्रेता-उपसर्ग संस्करण है जो पाठ की पृष्ठभूमि को क्लिप करने के लिए काम करता है। उस काम को देखने के लिए, पाठ को पारदर्शी बनाने की भी आवश्यकता होगी। सौभाग्य से, एक और विक्रेता-पूर्वनिर्मित पाठ रंग गुण है जो प्रभावी रूप से ओवरराइड कर सकता है color, जिससे इसका उपयोग करना सुरक्षित हो सकता है क्योंकि इसमें गिरावट आ सकती है:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

फ़ायरफ़ॉक्स, क्रोम और सफारी इसका समर्थन करते हैं।


CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन लिट पाठ देखें ।

सम्बंधित

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

और अधिक संसाधनों

  • background-clip CSS3 की कल्पना में
  • एमडीएन में पृष्ठभूमि-क्लिप
  • सीएसएस बॉक्स मॉडल

ब्राउज़र का समर्थन

सब साफ़!

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
1+ 3+ 4+ 10.5+ है 9+ 4.1+ काम करता है