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

background-attachmentसीएसएस निर्दिष्ट में संपत्ति कैसे व्यूपोर्ट में पृष्ठभूमि सापेक्ष स्थानांतरित करने के लिए।

तीन मानों हैं: scroll, fixed, और local। यह समझाने का सबसे अच्छा तरीका डेमो के माध्यम से है (व्यक्तिगत पृष्ठभूमि को स्क्रॉल करने का प्रयास करें):

कोडपेन पर टिमोथी मिलर (@tjacobdesign) द्वारा पेन बैकग्राउंड अटैचमेंट डेमो देखें।

जब बात कर रहे हों तो सोचने के लिए दो अलग-अलग विचार हैं background-attachment: मुख्य दृश्य (ब्राउज़र विंडो), और स्थानीय दृश्य (आप इसे ऊपर के डेमो में देख सकते हैं)।

scrollडिफ़ॉल्ट मान है। यह मुख्य दृश्य के साथ स्क्रॉल करता है, लेकिन स्थानीय दृश्य के अंदर स्थिर रहता है।

fixedकोई बात नहीं तय रहता है। यह एक भौतिक खिड़की की तरह है: खिड़की के चारों ओर घूमने से आपका दृष्टिकोण बदल जाता है, लेकिन यह नहीं बदलता है कि चीजें खिड़की के बाहर कहां हैं।

localका आविष्कार किया गया था क्योंकि डिफ़ॉल्ट scrollमान निश्चित पृष्ठभूमि की तरह काम करता है। यह मुख्य दृश्य और स्थानीय दृश्य दोनों को स्क्रॉल करता है। वहाँ कुछ बहुत अच्छी चीजें हैं जो आप इसके साथ कर सकते हैं।

सम्बंधित

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

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

• CSS3 कल्पना
• एमडीएन

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

fixedऔर scrollमूल्यों, हर जगह का समर्थन कर रहे हैं, हालांकि fixedमोबाइल पर अजीब तरीके से व्यवहार कर सकते हैं। localइस ब्राउज़र का समर्थन है:

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

डेस्कटॉप

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

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

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.2-4.3	14.0-14.4

Chrome-on-Android समर्थन करता है local, लेकिन पुराना Android ब्राउज़र ऐसा नहीं करता है।