हमने पहले
CSS3 के बैकग्राउंड और बॉर्डर्स मॉड्यूल की क्षमताओं को छुआ था, परछाई (
बॉक्स-शैडो ) के साथ काम करने पर विचार किया। आज हम एक और दिलचस्प विशेषता के बारे में बात करेंगे - पृष्ठभूमि में कई छवियों का उपयोग।
पृष्ठभूमि की संरचना
कई कारण हैं, सामान्य तौर पर, आपको पृष्ठभूमि में कई छवियों की रचना करने की आवश्यकता हो सकती है, उनमें से सबसे महत्वपूर्ण हैं:
- छवियों के आकार पर ट्रैफ़िक को सहेजना यदि कुल में व्यक्तिगत छवियां चपटी परतों के साथ छवि से कम वजन की हैं, और
- व्यक्तिगत परतों के स्वतंत्र व्यवहार की आवश्यकता, उदाहरण के लिए, जब लंबन के प्रभावों को लागू करना।
अन्य उचित कारण हो सकते हैं :)
क्लासिक दृष्टिकोण
इसलिए, हमें कई पृष्ठभूमि छवियों को एक दूसरे के ऊपर रखने की आवश्यकता है। इस समस्या को आमतौर पर कैसे हल किया जाता है? बहुत सरल: प्रत्येक पृष्ठभूमि छवि के लिए एक ब्लॉक बनाया जाता है, जिसमें संबंधित पृष्ठभूमि छवि पंजीकृत होती है। ब्लॉक या तो नेस्टेड हैं या उचित स्थिति नियमों के साथ एक पंक्ति में रखे गए हैं। यहाँ एक सरल उदाहरण है:
<div class="sample1"> <div class="sea"> <div class="mermaid"><div class="fishing"></div></div> <div class="fish"></div> </div> </div>
"मत्स्यस्त्री" के अंदर "मछली पकड़ने" वर्ग के साथ एक ब्लॉक केवल प्रदर्शन प्रयोजनों के लिए है।
अब कुछ शैलियों:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing { height:300px; width:480px; position: relative; } .sample1 .sea { background: url(media/sea.png) repeat-x top left; } .sample1 .mermaid { background: url(media/mermaid.svg) repeat-x bottom left; } .sample1 .fish { background: url(media/fish.svg) no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; } .sample1 .fishing { background: url(media/fishing.svg) no-repeat top right 10px; }
परिणाम:
इस उदाहरण में, तीन नेस्टेड पृष्ठभूमि और मछली के साथ एक ब्लॉक, "पृष्ठभूमि" ब्लॉकों के बगल में स्थित है। सिद्धांत रूप में, मछली को स्थानांतरित किया जा सकता है, उदाहरण के लिए, जावास्क्रिप्ट या CSS3 संक्रमण / एनिमेशन का उपयोग करके।
वैसे, ".fishing" के लिए इस उदाहरण
में पृष्ठभूमि की स्थिति के लिए नए
सिंटैक्स का उपयोग किया
गया है , जिसे CSS3 में भी परिभाषित किया गया है:
background: url(media/fishing.svg) no-repeat top right 10px;
वर्तमान में यह IE9 + और ओपेरा 11+ में समर्थित है, लेकिन यह फ़ायरफ़ॉक्स 10 और क्रोम 16 में समर्थित नहीं है। इसलिए, अंतिम दो ब्राउज़रों के उपयोगकर्ता मछली को नहीं पकड़ पाएंगे।
और आगे चलते हैं। इस डिजाइन को सरल कैसे करें?
एकाधिक पृष्ठभूमि
CSS3 में जोड़ा गया एक नया विकल्प बचाव में आता है - एक बार में एक तत्व के लिए
कई पृष्ठभूमि छवियों को परिभाषित करने की क्षमता। यह इस तरह दिखता है:
<div class="sample2"> <div class="sea"> <div class="fish"></div> </div> </div>
और संबंधित शैलियों:
.sample2 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, top left; background-repeat: no-repeat, repeat-x, repeat-x ; } .sample2 .fish { background: url("media/fish.svg") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; }
एकाधिक छवियों को परिभाषित करने के लिए, आपको पृष्ठभूमि-छवि नियम का उपयोग करना चाहिए, अलग-अलग छवियों को अल्पविराम द्वारा सूचीबद्ध करना। अतिरिक्त नियम, एक सूची भी, आप प्रत्येक चित्र के लिए स्थिति, पुनरावृत्ति और अन्य पैरामीटर सेट कर सकते हैं। छवियों के क्रम पर ध्यान दें: परतें ऊपर से नीचे तक बाएं से दाएं सूचीबद्ध हैं।
परिणाम बिल्कुल वही है:
एक नियम
यदि मछली को बाद के जोड़तोड़ के लिए एक अलग ब्लॉक में आवंटित करने की आवश्यकता नहीं है, तो पूरी तस्वीर को एक सरल नियम के साथ फिर से लिखा जा सकता है:
<div class="sample3"> <div class="sea"></div> </div>
शैलियों:
.sample3 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, 30px 90px, top left; background-repeat: no-repeat, repeat-x ; }
मैं परिणाम के साथ एक तस्वीर नहीं दूंगा - मेरा विश्वास करो, यह ऊपर की दो तस्वीरों के साथ मेल खाता है। लेकिन फिर से शैलियों पर ध्यान दें, विशेष रूप से "पृष्ठभूमि-दोहराने" के लिए - विनिर्देश के अनुसार, यदि सूची का हिस्सा अंत में गायब है, तो ब्राउज़र को सूची में छवियों की संख्या से मेल खाने के लिए आवश्यक सूची के रूप में कई बार दोहराना चाहिए।
इस मामले में, यह इस तरह के विवरण के बराबर है:
background-repeat: no-repeat, repeat-x, <mark>no-repeat, repeat-x</mark>;
और भी छोटा
यदि आपको CSS 2.1 याद है, तो यह संक्षिप्त रूप में पृष्ठभूमि छवियों का वर्णन करने की क्षमता को परिभाषित करता है। कई छवियों के बारे में क्या? यह भी संभव है:
.sample4 .sea { height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") bottom left repeat-x, url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; }
लेकिन ध्यान दें कि अब आप मूल्यों को वैसे ही छोड़ नहीं सकते (जब तक कि वे डिफ़ॉल्ट मान से मेल नहीं खाते)। वैसे, अगर आप बैकग्राउंड इमेज का रंग सेट करना चाहते हैं, तो यह बहुत आखिरी लेयर में किया जाना चाहिए।
गतिशील चित्र
यदि कंटेनर के आकार के आधार पर रचना स्थिर या गतिशील नहीं है, तो कई पृष्ठ स्पष्ट रूप से पृष्ठ के डिजाइन को सरल बनाते हैं। लेकिन क्या होगा यदि आपको जावास्क्रिप्ट (चाल, स्क्रॉल, आदि) से स्वतंत्र रूप से रचना के व्यक्तिगत तत्वों के साथ काम करने की आवश्यकता है?
वैसे, यहां जीवन से एक उदाहरण है - यैंडेक्स में एक मंडप के साथ एक विषय:
यदि आप कोड में आते हैं, तो आपको कुछ इस तरह दिखाई देगा:
<div class=b-skin-bg sizcache="272" sizset="0"> <div class=b-fluff-bg sizcache="272" sizset="0"> <div class=b-fluff__sky sizcache="272" sizset="0"> <div style="background-position: 3244px 0px" class=b-fluff__cloud></div> <div style="width: 1200px" class=b-max-width sizcache="214" sizset="0"> <div class=b-fluff__placeholder sizcache="302" sizset="0"> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="30"></div> <div style="bottom: 50px; display: none; left: 879px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="31"></div> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="32"></div> ... </div> </div> </div> </div> </div>
बी-फुल-बीजी, बी-फ्लफ__क्लाउड, और बी-फ्लफ -__टेम कक्षाओं के साथ ब्लॉक में पृष्ठभूमि छवियां होती हैं जो एक-दूसरे को ओवरलैप करती हैं। इसके अलावा, बादलों के साथ पृष्ठभूमि लगातार स्क्रॉल करती है, और स्क्रीन के चारों ओर डंडेलियन उड़ते हैं।
क्या कई पृष्ठभूमि का उपयोग करके इसे फिर से लिखा जा सकता है? सिद्धांत रूप में, हाँ, लेकिन 1 के अधीन) लक्ष्य ब्राउज़रों में इस सुविधा के लिए समर्थन और ... 2) पर पढ़ा;)
कई पृष्ठभूमि में स्पीकर कैसे जोड़ें? ऐसी स्थिति में, यह सुविधाजनक हो जाता है कि आंतरिक प्रतिनिधित्व में ब्राउज़र प्रासंगिक नियमों के अनुसार पृष्ठभूमि छवि के अलग-अलग मापदंडों को कुरेदता है। उदाहरण के लिए, स्थिति के लिए "पृष्ठभूमि-स्थिति" है, और बदलाव के लिए यह केवल इसे बदलने के लिए पर्याप्त है। हालांकि, कई छवियों का उपयोग करने के लिए एक शुल्क भी है - इस नियम में (और किसी भी समान) आपको अपने ब्लॉक के लिए निर्धारित सभी पृष्ठभूमि के लिए स्थिति को सूचीबद्ध करना होगा, और आप यह चयन नहीं कर सकते।
मछली के साथ हमारी पृष्ठभूमि में एनीमेशन जोड़ने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:
$(document).ready(function() { var sea = $(".sample5 .sea")[0]; var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() { fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX < 0) fishesX = 480; mermaidX += 0.5; if(mermaidX > 480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); } animationLoop(); });
जहाँ
window.requestAnimFrame = (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 = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";
मुझे यकीन है कि यह एक सुविधाजनक जावास्क्रिप्ट कोड में लपेटा जा सकता है जो कि अलग-अलग परतों के साथ संबंधों के वर्चुअलाइजेशन पर ले जाएगा, जबकि पेज के HTML-कोड को यथासंभव स्वच्छ रखा जाएगा।
अनुकूलता के साथ क्या है?
लोकप्रिय ब्राउज़रों के सभी आधुनिक संस्करण, जिनमें IE9 + शामिल हैं, कई छवियों का समर्थन करते हैं (आप उदाहरण के लिए,
कैनीयूज़ के साथ जांच कर सकते हैं)।
आप उन ब्राउज़रों को वैकल्पिक समाधान प्रदान करने के लिए
माडर्निज़्र का भी उपयोग कर सकते हैं जो कई पृष्ठभूमि का समर्थन नहीं करते हैं। जैसा कि क्रिस कॉयर ने
कई पृष्ठभूमि का उपयोग करते समय लेयर ऑर्डर पर एक
नोट में लिखा था, ऐसा कुछ करें:
.multiplebgs body { } .no-multiplebgs body { }
यदि आप पिछड़े अनुकूलता प्रदान करने के लिए जेएस का उपयोग करने के बारे में भ्रमित हैं, तो आप बस पृष्ठभूमि को दो बार घोषित कर सकते हैं, हालांकि, संसाधनों की संभावित दोहरी लोडिंग के रूप में इसकी कमियां भी हैं (यह एक विशेष ब्राउज़र में सीएसएस प्रसंस्करण के कार्यान्वयन पर निर्भर करता है):
background: #000 url(...) ...; background url(...), url(...), url(...), #000 url(...);
यदि आपने पहले ही विंडोज 8 के बारे में सोचना शुरू कर दिया है, तो ध्यान रखें कि मेट्रो शैली के अनुप्रयोगों को विकसित करते समय आप कई पृष्ठभूमि का उपयोग कर सकते हैं, क्योंकि उसी इंजन का उपयोग IE10 के रूप में अंदर किया जाता है।
ps इस विषय में: मैं मदद नहीं कर सकता लेकिन
सिकाडा के
सिद्धांत के बारे में अभूतपूर्व लेख को याद कर सकता हूं।