दो पृष्ठभूमि छवियाँ. एक तत्व में दो पृष्ठभूमि छवियां कैसे जोड़ें? CSS3 के साथ सुधार

सीएसएस 2.1 छद्म-तत्वों का उपयोग करने से आपको पृष्ठभूमि के 3 स्तर, 2 निश्चित आकार की छवियां और एक ही HTML तत्व पर कई जटिल स्ट्रोक की अनुमति मिलती है। यह विधिस्थिति के साथ सीएसएस 2.1 छद्म-तत्वों का समर्थन करने वाले सभी ब्राउज़रों के लिए वेब पेजों की डिज़ाइन क्षमताओं को महत्वपूर्ण रूप से विस्तारित करता है। CSS3 समर्थन की आवश्यकता नहीं है.

मूलतः, सीएसएस छद्म-तत्वों (:पहले और :बाद) को बनाना और उनके साथ काम करना उसी तरह है जैसे आप लक्ष्य तत्व के भीतर नेस्टेड HTML तत्वों के साथ काम करते हैं। लेकिन एक महत्वपूर्ण लाभ के साथ - सब कुछ नेस्टेड HTML तत्वों का उपयोग किए बिना, शब्दार्थ विज्ञान के बाहर किया जाता है।

एकाधिक पृष्ठभूमि और/या स्ट्रोक बनाने के लिए, छद्म तत्वों को सामग्री के पीछे स्लाइड किया जाता है और पूर्ण स्थिति का उपयोग करके HTML तत्व में वांछित बिंदु पर एंकर किया जाता है।

छद्म तत्व में कोई वास्तविक सामग्री नहीं है और यह बिल्कुल स्थित है। इस तरह इसे सामग्री को प्रभावित किए बिना "मूल" तत्व के किसी भी क्षेत्र पर बढ़ाया जा सकता है। ऐसा करने के लिए, आप ऊपर, दाएं, नीचे, बाएं, चौड़ाई और ऊंचाई गुणों के संयोजन का उपयोग कर सकते हैं।

आप क्या प्रभाव प्राप्त कर सकते हैं?

केवल एक तत्व का उपयोग करके आप लंबन, एकाधिक पृष्ठभूमि (रंग और छवि दोनों), फसली पृष्ठभूमि छवियां, छवि प्रतिस्थापन, स्ट्रोक के रूप में छवियों के साथ विस्तार योग्य तत्व, लचीले कृत्रिम कॉलम, तत्व की सीमाओं से परे विस्तारित छवियां, एकाधिक स्ट्रोक और अन्य लोकप्रिय प्राप्त कर सकते हैं। वे प्रभाव जो आम तौर पर छवि टैग और/या अतिरिक्त HTML मार्कअप का उपयोग करते हैं।

डेमो पेजों पर आप इस तकनीक का उपयोग करके कई लोकप्रिय वेब पेज डिज़ाइन प्रभावों के कार्यान्वयन को देख सकते हैं।

इसके अलावा, आप अधिक जटिल प्रभाव प्राप्त करने के लिए :hover के लिए स्टाइलिंग परिवर्तनों का उपयोग कर सकते हैं।

नमूना कोड: एकाधिक पृष्ठभूमि छवियाँ

इस तकनीक का उपयोग करके, आप केवल एक HTML तत्व का उपयोग करके, एकाधिक पृष्ठभूमि छवियों (जैसा कि सिल्वरबैक साइट पर उपयोग किया जाता है) के साथ लंबन प्रभाव को पुन: उत्पन्न कर सकते हैं।

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

#सिल्वरबैक (स्थिति:सापेक्ष; z-सूचकांक:1; न्यूनतम-चौड़ाई:200px; न्यूनतम-ऊंचाई:200px; पैडिंग:120px 200px 50px; पृष्ठभूमि:#d3ff99 url(वाइन्स-बैक.png) -10% 0 रिपीट-x ; )

दोनों छद्म तत्व बिल्कुल स्थित हैं और तत्व के किनारों पर रखे गए हैं। -1 का z-सूचकांक मान छद्म तत्व को परत के पीछे रखता है सामग्री. इस तरह, छद्म तत्वों को तत्व की पृष्ठभूमि और रूपरेखा के शीर्ष पर रखा जाता है, लेकिन सभी सामग्री चयन योग्य और माउस क्लिक के प्रति संवेदनशील रहती है।

#सिल्वरबैक:पहले, #सिल्वरबैक:बाद में (स्थिति:निरपेक्ष; z-सूचकांक:-1; शीर्ष:0; बाएँ:0; दाएँ:0; निचला:0; पैडिंग-टॉप:100px;)

प्रत्येक छद्म तत्व में पृष्ठभूमि छवियों का एक दोहराव वाला सेट होता है। लंबन प्रभाव को पुन: उत्पन्न करने के लिए, आपको किसी और चीज़ की आवश्यकता नहीं है।

सामग्री संपत्ति आपको जेनरेट की गई सामग्री के रूप में एक छवि जोड़ने की अनुमति देती है। दो छद्म तत्व होने से आप तत्व में 2 अतिरिक्त छवियां जोड़ सकते हैं। उन्हें टेक्स्ट-एलाइन और पैडिंग जैसे अन्य गुणों का उपयोग करके मोटे तौर पर छद्म तत्वों में स्थित किया जा सकता है।

#सिल्वरबैक:पहले (कंटेंट:यूआरएल(गोरिल्ला-1.पीएनजी); पैडिंग-लेफ्ट:3%; टेक्स्ट-एलाइन:लेफ्ट; बैकग्राउंड:पारदर्शी यूआरएल(वाइन्स-मिड.पीएनजी) 300% 0 रिपीट-एक्स; ) #सिल्वरबैक :बाद (सामग्री:यूआरएल(गोरिल्ला-2.पीएनजी); पैडिंग-दाएं:3%; टेक्स्ट-संरेखण:दाएं; पृष्ठभूमि:पारदर्शी यूआरएल(वाइन्स-फ्रंट.पीएनजी) 70% 0 रिपीट-एक्स; )

उदाहरण कोड: लचीले कृत्रिम स्तंभ

वर्णित तकनीक का एक अन्य अनुप्रयोग लचीले स्तंभों का निर्माण है समान ऊंचाईछवियों या अतिरिक्त संबंधित तत्वों के उपयोग के बिना।

HTML मार्कअप बहुत सरल है. इसके बजाय प्रत्येक div तत्व के लिए कक्षाओं का उपयोग करना सीएसएस चयनकर्ता 2.1, जो IE6 द्वारा समर्थित नहीं हैं। यदि IE6 का समर्थन करने की कोई आवश्यकता नहीं है, तो चयनकर्ताओं का उपयोग किया जा सकता है।

कंटेनर में प्रतिशत चौड़ाई, सापेक्ष स्थिति और सकारात्मक z-सूचकांक संपत्ति मान होता है। ओवरफ़्लो का उपयोग करना: छिपा हुआ एक तत्व को अपने फ़्लोटिंग बच्चों की सामग्री को लपेटने की अनुमति देता है और लटकते छद्म तत्वों को छुपाता है। पृष्ठभूमि का रंग किसी एक कॉलम के लिए रंग प्रदान करता है।

#अशुद्ध (स्थिति:सापेक्ष; z-सूचकांक:1; चौड़ाई:80%; मार्जिन:0 स्वचालित; अतिप्रवाह:छिपा हुआ; पृष्ठभूमि:#ffaf00; )

Div के वंशज तत्वों के लिए सापेक्ष स्थिति का उपयोग करने से आप मूल लेआउट में उनकी उपस्थिति की परवाह किए बिना कॉलम के क्रम को नियंत्रित कर सकते हैं।

#फॉक्स डिव (स्थिति:सापेक्ष; फ्लोट:बाएं; चौड़ाई:30%; ) #फॉक्स .मेन (बाएं:35%) #फॉक्स .supp1 (बाएं:-28.5%) #फॉक्स .supp2 (बाएं:8.5%)

अन्य दो कॉलम पृष्ठभूमि वाले छद्म तत्वों का उपयोग करके बनाए गए हैं। यदि आवश्यक हो तो आप पृष्ठभूमि के रूप में छवियों का उपयोग कर सकते हैं।

#अशुद्ध:पहले, #अशुद्ध:बाद में (सामग्री:""; स्थिति:पूर्ण; z-सूचकांक:-1; शीर्ष:0; दाएँ:0; निचला:0; बाएँ:33.333%; पृष्ठभूमि:#f9b6ff; ) # ग़लत:बाद में (बाएँ:66.667%; पृष्ठभूमि:#79daff;)

नमूना कोड: एकाधिक स्ट्रोक

एकाधिक स्ट्रोक लगभग एक ही तरीके से व्यवस्थित होते हैं। इसका उपयोग आपको प्रभाव को बनाए रखते हुए छवियों को त्यागने की अनुमति देता है।

छद्म तत्वों द्वारा बनाए गए अतिरिक्त स्ट्रोक को शामिल करने के लिए तत्व की सापेक्ष स्थिति और पैडिंग चौड़ाई पर्याप्त होनी चाहिए।

#सीमाएँ (स्थिति:सापेक्ष; z-सूचकांक:1; पैडिंग:30px; सीमा:5px ठोस #f00; पृष्ठभूमि:#ff9600; )

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

#सीमाएँ: पहले (सामग्री:""; स्थिति:पूर्ण; z-सूचकांक:-1; शीर्ष:5px; बाएँ:5px; दाएँ:5px; निचला:5px; सीमा:5px ठोस #ffea00; पृष्ठभूमि:#4aa929; ) #सीमाएँ:बाद में (सामग्री:""; स्थिति:पूर्ण; z-सूचकांक:-1; शीर्ष:15px; बाएँ:15px; दाएँ:15px; निचला:15px; सीमा:5px ठोस #00b4ff; पृष्ठभूमि:#fff; )

प्रगतिशील सुधार और विरासत ब्राउज़र

IE6 और IE7 CSS 2.1 छद्म-तत्वों का समर्थन नहीं करते हैं और सभी:पहले और बाद की घोषणाओं को अनदेखा करते हैं। वे सभी सुधार नहीं लाएंगे, लेकिन मुख्य कार्यक्षमता बनाए रखेंगे।

फ़ायरफ़ॉक्स 3.0 का उपयोग करते समय ध्यान दें

फ़ायरफ़ॉक्स 3.0 सीएसएस 2.1 छद्म तत्वों का समर्थन करता है, लेकिन उनकी स्थिति का समर्थन नहीं करता है। इस आंशिक समर्थन के कारण, प्रभाव जो स्पष्ट रूप से छद्म तत्वों की चौड़ाई या ऊंचाई गुणों पर निर्भर करते हैं, भयानक लग सकते हैं। कोई नहीं है वैकल्पिक तरीकाफ़ायरफ़ॉक्स 3.0 के लिए यदि आपने चौड़ाई या ऊँचाई गुणों का उपयोग किया है. कभी-कभी छद्म-तत्व शैलियों में डिस्प्ले:ब्लॉक जोड़कर कुछ सुधार प्राप्त किए जा सकते हैं।

उन तकनीकों का उपयोग करने से पहले जिनके लिए चौड़ाई या ऊंचाई गुणों का उपयोग करके छद्म तत्वों की स्थिति की आवश्यकता होती है, आपको यह विचार करना होगा कि फ़ायरफ़ॉक्स 3.0 का समर्थन करना कितना महत्वपूर्ण है और आपके उपयोगकर्ताओं का प्रतिशत जो उस ब्राउज़र का उपयोग करते हैं।

यह समस्या उन अनुप्रयोगों में पूरी तरह से हल हो गई है जो चौड़ाई या ऊंचाई गुणों के बजाय पूर्ण स्थिति का उपयोग करते हैं।

CSS3 के साथ सुधार

इस आलेख में लागू किए गए सभी उदाहरण CSS3 का उपयोग करके सुधारे जा सकते हैं।

बॉर्डर-त्रिज्या, आरजीबीए का उपयोग करके, छद्म तत्वों के साथ संयोजन में गुणों और कई CSS3 पृष्ठभूमि को बदल दिया जाता है, जिससे अधिक जटिल प्रभावों को लागू करने की संभावना खुल सकती है। हालाँकि, वर्तमान में ऐसा कोई ब्राउज़र नहीं है जो छद्म तत्वों के लिए CSS3 एनिमेशन या परिवर्तनों का समर्थन करता हो।

भविष्य: CSS3 छद्म तत्व

CSS3 छद्म-तत्वों में सुझाए गए संवर्द्धन (CSS3 उत्पन्न और प्रतिस्थापित सामग्री मॉड्यूल दस्तावेज़ देखें) में बाध्य छद्म-तत्व (::before::before), एकाधिक छद्म-तत्व (::बाद(2)), रैपिंग छद्म-तत्व शामिल हैं ( : :बाहर) और दस्तावेज़ के लोड किए गए हिस्सों के लिए छद्म तत्वों को सम्मिलित करने की क्षमता (::वैकल्पिक)।

इस तरह के परिवर्तन केवल एक तत्व और छद्म तत्वों के एक सेट का उपयोग करके सभी प्रकार के प्रभाव पैदा करने की लगभग असीमित संभावनाएं खोल देंगे।

). आज हम एक और दिलचस्प विशेषता के बारे में थोड़ी बात करेंगे - पृष्ठभूमि में एकाधिक छवियों का उपयोग करना।

पृष्ठभूमि रचना

ऐसे कई कारण हैं जिनकी वजह से आप पृष्ठभूमि में एकाधिक छवियां बनाना चाहेंगे, जिनमें से सबसे महत्वपूर्ण हैं:

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

शास्त्रीय दृष्टिकोण

"मत्स्यांगना" के अंदर "मछली पकड़ने" वर्ग वाला एक ब्लॉक केवल प्रदर्शन उद्देश्यों के लिए है।

अब कुछ शैलियाँ:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (ऊंचाई:300px; चौड़ाई:480px; स्थिति: सापेक्ष; ) .sample1 .sea (पृष्ठभूमि: url(मीडिया/समुद्र.png) रिपीट-x ऊपर बाएँ; ) .sample1 .mermaid (बैकग्राउंड: url(media/mermaid.svg) रिपीट-x बॉटम लेफ्ट; ) .sample1 .फिश (बैकग्राउंड: url(मीडिया/फिश.svg) नो-रिपीट; ऊंचाई: 70px; चौड़ाई: 100px; लेफ्ट : 30px; शीर्ष: 90px; स्थिति: निरपेक्ष ) .sample1 .फिशिंग (पृष्ठभूमि: url(मीडिया/फिशिंग.svg) नो-रिपीट टॉप राइट 10px;)

परिणाम:

इस उदाहरण में, तीन नेस्टेड पृष्ठभूमि हैं और मछली वाला एक ब्लॉक "पृष्ठभूमि" ब्लॉक के बगल में स्थित है। सिद्धांत रूप में, मछली को स्थानांतरित किया जा सकता है, उदाहरण के लिए, साथ जावास्क्रिप्ट का उपयोग करनाया CSS3 ट्रांज़िशन/एनिमेशन।

वैसे, ".फ़िशिंग" के लिए यह उदाहरण पृष्ठभूमि स्थिति के लिए नए सिंटैक्स का उपयोग करता है, जिसे CSS3 में भी परिभाषित किया गया है:
पृष्ठभूमि: यूआरएल (मीडिया/फ़िशिंग.एसवीजी) नो-रिपीट शीर्ष दाईं ओर 10px;
यह वर्तमान में IE9+ और ओपेरा 11+ में समर्थित है, लेकिन फ़ायरफ़ॉक्स 10 और क्रोम 16 में समर्थित नहीं है। इसलिए पिछले दो ब्राउज़र के उपयोगकर्ता अभी तक मछली नहीं पकड़ पाएंगे।

एकाधिक पृष्ठभूमि

और संबंधित शैलियाँ:
.sample2 .sea (ऊंचाई:300px; चौड़ाई:480px; स्थिति: सापेक्ष; पृष्ठभूमि-छवि: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. पीएनजी"); बैकग्राउंड-पोजीशन: ऊपर दाएं 10px, नीचे बाएं, ऊपर बाएं; बैकग्राउंड-रिपीट: नो-रिपीट, रिपीट-x, रिपीट-x; ) .sample2 .fish (बैकग्राउंड: url("मीडिया/फिश.svg) ") कोई दोहराव नहीं; ऊँचाई: 70 पिक्सेल; चौड़ाई: 100 पिक्सेल; बाएँ: 30 पिक्सेल; शीर्ष: 90 पिक्सेल; स्थिति: पूर्ण; )
एकाधिक छवियों को परिभाषित करने के लिए, आपको पृष्ठभूमि-छवि नियम का उपयोग करना होगा, जिसमें अलग-अलग छवियों को अल्पविराम से अलग किया जाएगा। अतिरिक्त नियम, एक सूची भी, प्रत्येक छवि के लिए स्थिति, दोहराव और अन्य पैरामीटर सेट कर सकते हैं। उस क्रम पर ध्यान दें जिसमें छवियां सूचीबद्ध हैं: परतें बाएं से दाएं सबसे ऊपर से सबसे नीचे तक सूचीबद्ध हैं।

परिणाम बिल्कुल वैसा ही है:

एक नियम

शैलियाँ:
.sample3 .sea (ऊंचाई:300px; चौड़ाई:480px; स्थिति: सापेक्ष; पृष्ठभूमि-छवि: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. एसवीजी"), यूआरएल ("मीडिया/सी.पीएनजी"); बैकग्राउंड-पोजीशन: ऊपर दाएं 10px, नीचे बाएं, 30px 90px, ऊपर बाएं; बैकग्राउंड-रिपीट: नो-रिपीट, रिपीट-x ; )

मैं परिणाम की कोई तस्वीर नहीं दिखाऊंगा - मेरा विश्वास करें, यह ऊपर की दो तस्वीरों से मेल खाता है। लेकिन शैलियों पर फिर से ध्यान दें, विशेष रूप से "बैकग्राउंड-रिपीट" - विनिर्देश के अनुसार, यदि अंत में सूची का हिस्सा गायब है, तो ब्राउज़र को छवियों की संख्या से मेल खाने के लिए निर्दिष्ट सूची को आवश्यक संख्या में बार दोहराना होगा सूची में।

इस मामले में, यह इस विवरण के बराबर है:
बैकग्राउंड-रिपीट: नो-रिपीट, रिपीट-एक्स, नो-रिपीट, रिपीट-एक्स;

और भी छोटा

नमूना4 .समुद्र (ऊंचाई:300पीएक्स; चौड़ाई:480पीएक्स; स्थिति: सापेक्ष; पृष्ठभूमि: यूआरएल("मीडिया/फिशिंग.एसवीजी") ऊपर दाएं 10पीएक्स नो-रिपीट, यूआरएल("मीडिया/मरमेड.एसवीजी") नीचे बायां रिपीट-एक्स , यूआरएल('मीडिया/फिश.एसवीजी') 30पीएक्स 90पीएक्स नो-रिपीट, यूआरएल('मीडिया/समुद्र.पीएनजी') रिपीट-एक्स)

लेकिन ध्यान दें कि अब आप केवल मानों को छोड़ नहीं सकते (जब तक कि वे डिफ़ॉल्ट मान से मेल न खाएं)। वैसे, यदि आप पृष्ठभूमि छवि का रंग सेट करना चाहते हैं, तो यह सबसे आखिरी परत में किया जाना चाहिए।

गतिशील छवियां

वैसे, यहाँ जीवन से एक उदाहरण है - यांडेक्स में सिंहपर्णी के साथ एक विषय:


यदि आप कोड पर गौर करेंगे तो आपको कुछ इस तरह दिखाई देगा:

...

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

क्या इसे एकाधिक पृष्ठभूमियों का उपयोग करके दोबारा लिखा जा सकता है? सैद्धांतिक रूप से, हाँ, लेकिन 1) लक्षित ब्राउज़रों में इस सुविधा के लिए समर्थन के अधीन और...2) आगे पढ़ें;)

एकाधिक पृष्ठभूमियों में गतिशीलता कैसे जोड़ें? ऐसी स्थिति में, यह सुविधाजनक हो जाता है कि ब्राउज़र आंतरिक प्रतिनिधित्व में अलग-अलग मापदंडों को बिखेरता है पृष्ठभूमि छवियोंप्रासंगिक नियमों के अनुसार. उदाहरण के लिए, पोजीशनिंग के लिए "पृष्ठभूमि-स्थिति" है, और बदलावों के लिए केवल इसे बदलना ही पर्याप्त है। हालाँकि, कई छवियों का उपयोग करने की एक लागत है - इस नियम (और किसी भी समान) के लिए आपको अपने ब्लॉक के लिए परिभाषित सभी पृष्ठभूमि के लिए स्थिति सूचीबद्ध करने की आवश्यकता होती है, और आप इसे चुनिंदा रूप से नहीं कर सकते हैं।

हमारी मछली पृष्ठभूमि में एनीमेशन जोड़ने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:
$(document).ready(function() ( var Sea = $(".sample5 .sea"); varfishesX = 30; varfishesY = 90; varfishX = 0; varfishY = 0; var mermaidX = 0; var टी = 0; फ़ंक्शन एनीमेशनलूप() (फिशसवाई = 90 + मैथ.फ्लोर(30 * मैथ.सिन(टी++/180.0)); यदि(--फिशएक्स< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) जलपरीएक्स = 0; मछलीवाई = -10 + (10 * गणित.कोस(टी * 0.091)); फिशएक्स = 10 + (5 * गणित.पाप(टी * 0.07)); Sea.style.backgroundPosition = "शीर्ष" + फिशवाई + "पीएक्स दाएं" + फिशएक्स + "पीएक्स, " + मरमेडएक्स + "पीएक्स बॉटम," + फिशएक्स + "पीएक्स" + फिशवाई + "पीएक्स, टॉप लेफ्ट"; window.requestAnimFrame(एनिमेशनलूप); ) एनीमेशनलूप(); ));
कहाँ
window.requestAnimationFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60) )); ))();

और वैसे, एनिमेशन CSS3 ट्रांज़िशन/एनिमेशन का उपयोग करके भी किया जा सकता है, लेकिन यह एक अलग चर्चा का विषय है।

लंबन और अन्तरक्रियाशीलता

ऐसे परिदृश्यों में एकाधिक पृष्ठभूमि छवियां उपयोगी होती हैं, क्योंकि जब हम केवल पृष्ठभूमि के बारे में बात कर रहे होते हैं (सामग्री के बारे में नहीं), तो उनका उपयोग हमें HTML कोड और DOM को खराब होने से बचाने की अनुमति देता है। लेकिन हर चीज की एक कीमत होती है: मैं नाम, आईडी, वर्ग या किसी अन्य पैरामीटर के आधार पर व्यक्तिगत रचना तत्वों तक नहीं पहुंच सकता। मुझे कोड में संरचना में तत्वों के क्रम को स्पष्ट रूप से याद रखना चाहिए, और किसी भी तत्व के किसी भी पैरामीटर में प्रत्येक परिवर्तन के लिए, वास्तव में, मुझे सभी तत्वों के लिए इस पैरामीटर के मानों का वर्णन करने वाली एक पंक्ति को एक साथ चिपकाना होगा और इसे अपडेट करना होगा संपूर्ण रचना.

Sea.style.backgroundPosition = "टॉप" + फिशवाई + "पीएक्स राइट" + फिशएक्स + "पीएक्स, " + मरमेडएक्स + "पीएक्स बॉटम," + फिशएक्स + "पीएक्स" + फिशवाई + "पीएक्स, टॉप लेफ्ट";

मुझे यकीन है कि इसे सुविधाजनक जावास्क्रिप्ट कोड में लपेटा जा सकता है, जो पेज के HTML कोड को यथासंभव साफ रखते हुए, व्यक्तिगत परतों के साथ संबंधों के वर्चुअलाइजेशन का ख्याल रखेगा।

अनुकूलता के बारे में क्या?

आप उन ब्राउज़रों के लिए वैकल्पिक समाधान प्रदान करने के लिए मॉडर्निज़र का भी उपयोग कर सकते हैं जो एकाधिक पृष्ठभूमि का समर्थन नहीं करते हैं। जैसा कि क्रिस कॉयियर ने कई पृष्ठभूमियों का उपयोग करते समय परत क्रम के बारे में अपनी पोस्ट में लिखा था, कुछ इस तरह करें:

मल्टीपलबीजीएस बॉडी (/* बहुत बढ़िया मल्टीपल बीजी घोषणाएं जो वास्तविकता से परे हैं और स्रोतहीन लड़कियां */) .नो-मल्टीपलबीजीएस बॉडी (/* लाआआमे फ़ॉलबैक */)
यदि आप बैकवर्ड संगतता प्रदान करने के लिए जेएस का उपयोग करने के बारे में चिंतित हैं, तो आप पृष्ठभूमि को दो बार घोषित कर सकते हैं, हालांकि संसाधनों की संभावित दोहरी लोडिंग के रूप में इसकी कमियां भी हैं (यह किसी विशेष ब्राउज़र में सीएसएस प्रसंस्करण के कार्यान्वयन पर निर्भर करता है):

/* एकाधिक बीजी फ़ॉलबैक */ पृष्ठभूमि: #000 यूआरएल(...) ...; /* बहुत बढ़िया मल्टीपल बीजी घोषणाएं जो वास्तविकता और अस्रोत से परे हैं */ पृष्ठभूमि यूआरएल(...), यूआरएल(...), यूआरएल(...), #000 यूआरएल(...);

यदि आपने पहले ही विंडोज 8 के बारे में सोचना शुरू कर दिया है, तो ध्यान रखें कि मेट्रो स्टाइल एप्लिकेशन विकसित करते समय आप कई पृष्ठभूमि का उपयोग कर सकते हैं, क्योंकि यह IE10 के समान इंजन का उपयोग करता है।

पी.एस. विषय पर: मैं इसके बारे में अभूतपूर्व लेख को याद किए बिना नहीं रह सकता

सीएसएस 2 में, एक ही समय में एक तत्व में दो पृष्ठभूमि जोड़ना असंभव है, इसलिए आपको एक तत्व को दूसरे के अंदर घोंसला बनाना होगा और प्रत्येक को अपनी पृष्ठभूमि छवि देनी होगी। जटिल लेआउट के लिए, ऐसे अनुलग्नकों को कभी-कभी लगभग एक दर्जन तक गिना जा सकता है। यह स्पष्ट है कि इस तरह के ढेर से कुछ भी अच्छा नहीं होगा, लेकिन क्या करें? पता चला कि कुछ तो है! सीएसएस 3 में, आप एक ही समय में किसी भी तत्व में एकाधिक पृष्ठभूमि छवियां जोड़ सकते हैं। इसलिए हम ब्लॉक ड्राइंग (चित्र 1) लेते हैं, इसे टुकड़ों में काटते हैं और ब्राउज़र में इसका परीक्षण करना शुरू करते हैं।

चावल। 1. साइट के लिए ब्लॉक करें

सरलता के लिए, मैं ब्लॉक की चौड़ाई को एक निश्चित आकार के रूप में लूंगा, और ऊंचाई सामग्री के आधार पर अलग-अलग होगी। ऊपर और नीचे के हिस्से ड्राइंग में स्पष्ट रूप से दिखाई दे रहे हैं; मैंने उन्हें संपादक में काट दिया और उन्हें एक अलग फ़ाइल में परतों में मोड़ दिया। मध्य भाग को चुना जाना चाहिए ताकि यह बिना सीम के लंबवत दोहराए। डिज़ाइन में एक अच्छी तरह से परिभाषित दोहराव पैटर्न है, इसलिए इसे उजागर करने में कोई कठिनाई नहीं होनी चाहिए। मैं पिछले अंशों को कॉपी और पेस्ट करता हूँ। परिणाम इस प्रकार का चित्र होगा (चित्र 2)।

चावल। 2. तैयार छवियाँ

सिद्धांत रूप में, आप प्रत्येक टुकड़े को इस प्रकार सहेज सकते हैं अलग फ़ाइल, लेकिन सीएसएस स्प्राइट्स (कई छवियों को एक में जोड़ने की तथाकथित तकनीक) के कई फायदे हैं। सबसे पहले, फ़ाइलों की संख्या में कमी के कारण सर्वर पर अनुरोधों की संख्या कम हो जाती है और दूसरी बात, कुल मिलाकर चित्र तेजी से लोड और प्रदर्शित होते हैं।

पृष्ठभूमि स्वयं पृष्ठभूमि संपत्ति द्वारा प्रदर्शित होती है, जो वांछित टुकड़े के निर्देशांक भी निर्दिष्ट करती है। प्रत्येक पृष्ठभूमि के पैरामीटर अल्पविराम से अलग सूचीबद्ध हैं, और इस मामले में उनका क्रम मायने रखता है। मैं चाहता हूं कि ब्लॉक के ऊपर और नीचे ओवरलैप न हों, इसलिए मैंने उन्हें पहले रखा (उदाहरण 1)।

उदाहरण 1. एकाधिक पृष्ठभूमि छवियाँ

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

पहली पृष्ठभूमि ब्लॉक की शीर्ष सीमा को प्रदर्शित करती है, दूसरी पृष्ठभूमि - निचली सीमा को, और तीसरी - ऊर्ध्वाधर सीमाओं को प्रदर्शित करती है।

हम ब्राउज़रों में जाँच करते हैं। इंटरनेट एक्सप्लोरर 8 ने कोई भी चित्र प्रदर्शित नहीं किया, अन्य ब्राउज़रों (IE 9, ओपेरा 10.60, फ़ायरफ़ॉक्स 3.6, क्रोम 5, सफारी 5) ने फ़्रेम को सही ढंग से प्रदर्शित किया (चित्र 3)।

चावल। 3. सफ़ारी ब्राउज़र में फ़्रेम दृश्य

अनेक पृष्ठभूमियों का उपयोग करने से डेवलपर्स के लिए स्थिति बहुत आसान हो जाती है, विशेषकर ब्लॉक बनाते समय। बस एक छोटी सी चीज़ बची है. यह आवश्यक है कि IE 6-8 ब्राउज़र का अस्तित्व समाप्त हो जाए।

आज हम पृष्ठभूमि छवियों पर काम करेंगे, जो पृष्ठभूमि संपत्ति और उसके अतिरिक्त मूल्यों का उपयोग करके सेट की जाती हैं। आइए एक ही तत्व के लिए एकाधिक पृष्ठभूमि स्थापित करने के कुछ व्यावहारिक उदाहरण देखें।

यह कई मामलों और क्षणों में उपयोगी हो सकता है। विशेष रूप से इस मामले में छद्म तत्वों का उपयोग, क्योंकि वे मापदंडों में बहुत लचीले हैं।

बहुत सारी पृष्ठभूमि छवियां

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

Blockimg(पृष्ठभूमि: url("img/img2.png"),/*सबसे ऊपरी पृष्ठभूमि और फिर क्रमिक रूप से*/ url("img/img3.png"), url("img/img1.jpg"); पृष्ठभूमि-स्थिति: 370px केंद्र, 120px 150px, केंद्र केंद्र;/*छवियों की स्थिति*/ पृष्ठभूमि-दोहराएँ: कोई दोहराव नहीं;/*चित्र दोहराएँ*/ पृष्ठभूमि-रंग: #444;/*यदि पृष्ठभूमि रंग की आवश्यकता है*/ बॉक्स-छाया: 0 1px 2px rgba(0, 0, 0, 0.1); मार्जिन: 100px ऑटो 15px; चौड़ाई:700px; न्यूनतम-ऊंचाई: 300px; (पृष्ठभूमि: url('img/img2.png') 370px केंद्र, url ("img/img3.png") नो-रिपीट 120px 150px, url ("img/img1.jpg") नो-रिपीट सेंटर सेंटर ; मार्जिन: 100px ऑटो 15px; बॉक्स-साइज: बॉर्डर-बॉक्स; :700px;

स्पष्टीकरण।हम तत्व को एक पृष्ठभूमि छवि देते हैं, जो उसके स्थान का पथ दर्शाती है। अल्पविराम से अलग करके, हमें कई और पृष्ठभूमियाँ दर्ज करने का अवसर दिया जाता है, जैसा कि ऊपर दिए गए कोड में देखा जा सकता है। उनकी संख्या का क्रम यह निर्धारित करता है कि कौन सी छवि दूसरों के ऊपर होगी। यही है, पहली पृष्ठभूमि अन्य सभी की तुलना में अधिक है, और फिर अनुक्रम एक नियमित ग्राफिक संपादक के सिद्धांत का पालन करता है।

अगला संकेत दिया गया है अतिरिक्त विकल्पव्यक्तिगत गुणों के माध्यम से: स्थिति, पुनरावृत्ति, आकार, यदि आवश्यक हो, तो रंग। कृपया यह भी ध्यान दें कि सभी पैरामीटर चित्र की संख्या के समान क्रम में अल्पविराम द्वारा अलग किए गए लिखे गए हैं।

और एक आखिरी विवरण. संपूर्ण कोड को केवल एक सामान्य गुण, पृष्ठभूमि का उपयोग करके छोटा किया जा सकता है। कोड उदाहरण में एक दूसरा विकल्प है जो दिखाता है कि यह कैसे किया जाता है।

छद्म तत्व के माध्यम से पृष्ठभूमि छवि

इसके अलावा, वैकल्पिक विकल्पों के बारे में भी न भूलें, जैसे छद्म तत्वों से पहले और बाद में। उनके उपयोग में एक सकारात्मक लाभ है - छवि को तत्व के किनारे से आगे ले जाया जा सकता है, ताकि यह सीमा पर गायब न हो, बल्कि इसके शीर्ष पर हो। यदि आपको 3डी प्रभाव जैसा कुछ बनाना है तो यह तकनीक काम आएगी।

ब्लॉकिमग (पृष्ठभूमि: यूआरएल ("img/img1.jpg") नो-रिपीट;/*तत्व पृष्ठभूमि*/ स्थिति: सापेक्ष;/*स्थिति क्षेत्र*/ मार्जिन: 200px ऑटो 15px; बॉक्स-आकार: बॉर्डर-बॉक्स; पैडिंग: 25px; चौड़ाई:700px; न्यूनतम-ऊंचाई: 300px; .blockimg::before(पृष्ठभूमि: url("img/img1.png") नो-रिपीट सेंटर; निचला: 0; सामग्री: ""; ऊंचाई: 295px; बाएँ: 0; स्थिति: पूर्ण;/*पूर्ण स्थिति*/ दाएँ: 0; शीर्ष: -150px)

स्पष्टीकरण।वास्तव में, सब कुछ बहुत सरल है. हम पृष्ठभूमि को सामान्य तरीके से मुख्य तत्व पर सेट करते हैं। इसके बाद प्रमुख संपत्ति की स्थिति आती है: रिश्तेदार; , जो किसी अन्य तत्व को स्थानांतरित करने के लिए क्षेत्र को परिभाषित करता है जो मुख्य तत्व में है और जिसकी संपत्ति स्थिति है: पूर्ण; .

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

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

उदाहरण 1. तीन पृष्ठभूमि

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

चावल। 1. तीन छवियों के साथ पृष्ठभूमि

व्यक्तिगत पृष्ठभूमि छवियां आपको उनकी स्थिति बदलने और उन्हें चेतन करने की अनुमति भी देती हैं, जैसा कि उदाहरण 2 में दिखाया गया है।

उदाहरण 2. एनिमेटेड पृष्ठभूमि

आइए अब विचार करें कि एक फ्रेम के साथ ब्लॉक बनाने के लिए एक चित्र का उपयोग कैसे करें (चित्र 2)। ब्लॉक की चौड़ाई निश्चित है, और ऊंचाई ब्लॉक की सामग्री की मात्रा के आधार पर भिन्न होती है।

चावल। 2. हाथ से बनाया गया फ्रेम

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

चावल। 3. पृष्ठभूमि के लिए छवि तैयार की गई

पृष्ठभूमि स्वयं पृष्ठभूमि संपत्ति द्वारा प्रदर्शित होती है, जो वांछित टुकड़े के निर्देशांक भी निर्दिष्ट करती है। प्रत्येक पृष्ठभूमि के पैरामीटर अल्पविराम से अलग सूचीबद्ध हैं, और इस मामले में उनका क्रम मायने रखता है। हम चाहते हैं कि ब्लॉक के ऊपर और नीचे ओवरलैप न हों, इसलिए हम उन्हें पहले रखते हैं (उदाहरण 3)। पृष्ठभूमि का रंग अंतिम रूप से निर्दिष्ट है।

उदाहरण 3. कई पृष्ठभूमि छवियाँ

पहली पृष्ठभूमि ब्लॉक की शीर्ष सीमा को प्रदर्शित करती है, दूसरी पृष्ठभूमि - निचली सीमा को, और तीसरी - ऊर्ध्वाधर सीमाओं को प्रदर्शित करती है। अंतिम वह रंग है जो ब्लॉक के पारदर्शी मध्य भाग में दिखाई देता है (चित्र 4)।