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

Anonim

background-positionसीएसएस में संपत्ति आप अपने कंटेनर के भीतर एक पृष्ठभूमि छवि (या ढाल) के चारों ओर ले जाने के लिए अनुमति देता है।

html ( background-position: 100px 5px; )

इसके तीन अलग-अलग प्रकार हैं:

  • लंबाई मान (जैसे 100px 5px)
  • प्रतिशत (जैसे 100% 5%)
  • खोजशब्द (जैसे top right)

डिफ़ॉल्ट मान 0 0 हैं। यह आपकी पृष्ठभूमि छवि को कंटेनर के शीर्ष पर रखता है।

लंबाई मान बहुत सरल हैं: पहला मान क्षैतिज स्थिति है, दूसरा मान ऊर्ध्वाधर स्थिति है। तो 100px 5pxछवि को 100px दाईं ओर और पांच पिक्सेल नीचे ले जाएंगे। आप में लंबाई मूल्यों को निर्धारित कर सकते हैं px, emया अन्य सीएसएस लंबाई से कोई भी मान।

प्रतिशत थोड़ा अलग तरीके से काम करते हैं। अपना गणित हटाएं: एक पृष्ठभूमि छवि को X% पर ले जाने का अर्थ है कि यह छवि में X% बिंदु को कंटेनर में X% बिंदु से संरेखित करेगा। उदाहरण के लिए, 50%इसका मतलब है कि यह कंटेनर के बीच के साथ छवि के मध्य को संरेखित करेगा। 100%इसका मतलब यह कंटेनर के अंतिम पिक्सेल के साथ छवि के अंतिम पिक्सेल को संरेखित करेगा, और इसी तरह।

कीवर्ड प्रतिशत के लिए सिर्फ शॉर्टकट हैं। यह याद रखना और लिखना आसान top rightहै 100% 0, और इसीलिए कीवर्ड एक चीज है। यहाँ सभी पाँच खोजशब्दों और उनके समकक्ष मूल्यों की सूची दी गयी है:

  • top: 0% लंबवत
  • right: 100% क्षैतिज रूप से
  • bottom: 100% खड़ी है
  • left: 0% क्षैतिज रूप से
  • center: 50% क्षैतिज अगर क्षैतिज पहले से परिभाषित नहीं है। यदि ऐसा है तो इसे लंबवत रूप से लागू किया जाता है।

यह ध्यान रखना दिलचस्प है कि यह महत्वपूर्ण नहीं है कि आप कीवर्ड के लिए किस क्रम का उपयोग करते हैं: top centerजैसा है वैसा ही है center top। यदि आप विशेष रूप से कीवर्ड का उपयोग कर रहे हैं, तो आप ऐसा कर सकते हैं। center 10%जैसा है वैसा नहीं है 10% center।

डेमो

यह डेमो background-positionलंबाई इकाइयों, प्रतिशत और कीवर्ड के साथ सेट के उदाहरण दिखाता है ।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड-पोजीशन मान देखें।

घोषित मूल्य

आप background-positionआधुनिक ब्राउज़र में चार मान दे सकते हैं (विवरण के लिए ब्राउज़र समर्थन तालिका देखें)।

यदि आप एक मान घोषित करते हैं , तो वह मूल्य क्षैतिज ऑफसेट है। ब्राउज़र ऊर्ध्वाधर ऑफसेट को सेट करता है center।

जब आप दो मानों की घोषणा करते हैं , तो पहला मान क्षैतिज ऑफसेट होता है और दूसरा मान ऊर्ध्वाधर ऑफसेट होता है।

जब आप तीन या चार मूल्यों का उपयोग करना शुरू करते हैं, तो चीजें थोड़ी पेचीदा हो जाती हैं, लेकिन आप अपने बैकग्राउंड प्लेसमेंट पर अधिक नियंत्रण भी प्राप्त करते हैं।

कीवर्ड और लंबाई या प्रतिशत इकाइयों के बीच एक तीन- या चार-मूल्य सिंटैक्स वैकल्पिक होता है। आप centerतीन या चार-मूल्य background-positionघोषणा को छोड़कर किसी भी कीवर्ड मान का उपयोग कर सकते हैं ।

जब आप तीन मान निर्दिष्ट करते हैं , तो ब्राउज़र "लापता" चौथे मूल्य को 0. के रूप में बताता है। यहां तीन-मूल्य का एक उदाहरण दिया गया है background-position:

#threevalues ( background-position: right 45px bottom; )

यह बैकग्राउंड इमेज को 45px दाईं ओर से और 0px कंटेनर के नीचे से रखता है।

यहां चार-मूल्य का एक उदाहरण दिया गया है background-position:

#fourvalues ( background-position: right 45px bottom 20px; )

यह बैकग्राउंड इमेज 45px दाईं ओर और 20px कंटेनर के नीचे से आती है।

ऊपर दिए गए उदाहरणों में मूल्यों के क्रम पर ध्यान दें: लंबाई इकाइयों द्वारा पीछा किए जाने वाले कीवर्ड। एक background-positionलंबाई या प्रतिशत इकाई वाले कीवर्ड के साथ एक तीन- या चार-मूल्य को उस प्रारूप का पालन करना चाहिए।

डेमो

इस डेमो में एक मान, दो मान, तीन मान और चार मान के उदाहरण शामिल हैं background-position।

कोड पृष्ठभूमि पर CSS- ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा पेन बैकग्राउंड-स्थिति 1, 2, 3 और 4 मान सिंटैक्स देखें।

सम्बंधित

  • पृष्ठभूमि संलग्न
  • बैकग्राउंड-क्लिप
  • पृष्ठभूमि का रंग
  • पृष्ठभूमि छवि
  • पृष्ठभूमि मूल के
  • पृष्ठभूमि दोहराएँ
  • पृष्ठभूमि का आकार

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

  • background-position CSS3 की कल्पना में
  • background-position एमडीएन में
  • ऑफसेट पृष्ठभूमि छवियाँ

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

हर जगह बुनियादी मूल्यों का समर्थन किया जाता है। चार-मूल्य सिंटैक्स में यह समर्थन है:

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
२५ १३ ९ १२ ।

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 4.4 7.0-7.1

यह गुण background-position-xऔर background-position-yगुणों के समान समर्थन स्तर है ।