वेब पृष्ठलाई फिट गर्न पृष्ठभूमि छवि कसरी खिच्नुहोस्

पृष्ठभूमि ग्राफिक्सको साथ आफ्नो वेबसाइट भिडन्त ब्याज दिनुहोस्

चित्रहरु आकर्षक वेबसाइट डिजाइन को एक महत्वपूर्ण भाग हो। यसमा पृष्ठभूमि तस्बिरहरूको प्रयोग समावेश छ। यी छविहरू र ग्राफिक्सहरू जुन पृष्ठको क्षेत्रहरू पछि प्रयोग गरिएका छन् जुन छवि पृष्ठहरूको भागको रूपमा चित्रण गरिएका चित्रहरूको विरोध गर्दछ। यी पृष्ठभूमिक छविहरूले पृष्ठको लागि दृश्य रुचि थप्न सक्छ र तपाईँलाई डिजाइन डिजाइन प्राप्त गर्न मद्दत गर्दछ जुन तपाइँ पृष्ठमा खोज्न सक्नुहुन्छ।

यदि तपाइँ पृष्ठभूमि तस्विरहरूसँग काम सुरु गर्नुहुन्छ भने, तपाईं निस्सन्देही रूपमा परिदृश्यमा घुमाउनुहुन्छ जहाँ तपाईं छवि फिट गर्न छवि चाहनुहुन्छ।

यो उत्तरदायी वेबसाइटहरूको लागि विशेष गरी सच्याइएको छ जुन यन्त्रहरू र स्क्रिन आकारहरूमा विस्तृत दायरामा डेलिभर गरिएको छ ।

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

पृष्ठको पृष्ठभूमि फिट गर्न छवि खिच्ने सबैभन्दा राम्रो तरिका पृष्ठभूमि आकारको लागि CSS3 सम्पत्ति प्रयोग गर्न हो। यहाँ एउटा उदाहरण हो जुन पृष्ठको शरीरको लागि पृष्ठभूमि छवि प्रयोग गर्दछ र जसलाई साइज 100% सम्म सेट गर्दछ त्यसैले यसले सधैँ स्क्रिन फिट गर्न विस्तार गर्दछ।

जीउ {
पृष्ठभूमि: url (bgimage.jpg) no-repeat;
पृष्ठभूमि आकार: 100%;
}

Caniuse.com को अनुसार, यो सम्पत्ति IE 9 +, फायरफक्स 4+, ओपेरा 10.5+, सफारी 5 +, क्रोम 10.5 +, र सबै प्रमुख मोबाइल ब्राउजरमा काम गर्दछ। यसले तपाइँलाई आज उपलब्ध सबै आधुनिक ब्राउजरहरूको लागि आवरण गर्दछ, जसको अर्थ तपाईंले यो सम्पत्तिलाई डराउनु पर्दैन कि यो बिना कुनै स्क्रिनमा काम गर्दैन।

पुरानो ब्राउजरमा एक खरानी पृष्ठभूमि फर्काउँदै

यो धेरै सम्भव छैन कि तपाईंलाई IE9 भन्दा पुरानो ब्राउजरलाई समर्थन गर्न आवश्यक छ, तर हामी मान्दछौं कि तपाइँ IE8 ले यस सम्पत्तिलाई समर्थन गर्दैन भनेर चिन्ता गर्नुहुन्छ। त्यस उदाहरणमा, तपाईं एक स्थिर पृष्ठभूमिलाई नक्कल गर्न सक्नुहुन्छ। र तपाइँ ब्राउजर उपसर्गहरू फायरफक्स 3.6 (-oz-पृष्ठभूमि-आकार) र ओपेरा 10.0 (-को-पृष्ठभूमि आकार) को लागि प्रयोग गर्न सक्नुहुनेछ।

एक विस्तारित पृष्ठभूमि छवि नक्कल गर्ने सबै भन्दा सजिलो तरीका यो सम्पूर्ण पेज मा फैलिएको छ। त्यसपछि तपाईं अतिरिक्त स्थानको साथ अन्त्य गर्नुहुन्न वा चिन्ता गर्नुपर्दछ कि तपाईंको पाठ फैलिएको क्षेत्रमा फिट हुन्छ। यहाँ कसरी गर्ने?

id = "bg" />

1. पहिला, निश्चित गर्नुहोस् कि सबै ब्राउजरहरूमा 100% उचाइ, 0 मार्जिन, र 0 प्याडिंग र HTML BODY तत्वहरू छन्। तपाईंको HTML कागजातको टाउकोमा राख्नुहोस्:

2. वेब पेजको पहिलो तत्वको रूपमा पृष्ठभूमि हुन चाहानु भएको छवि थप्नुहोस् र यसलाई "bg" को आईडी दिनुहोस्:

3. पृष्ठभूमि छवि स्थिति गर्नुहोस् ताकि यो माथि र बायाँ निश्चित छ र 100% चौडाई र उचाइमा 100% हो। यो तपाइँको शैली पानामा थप्नुहोस्:

   img # bg {
   स्थिति: निश्चित;
   top: 0;
   बायाँ: 0;
   चौडाई: 100%;
   उचाई: 100%;
   }

4. तपाईंको सामग्रीलाई DIV तत्व भित्रको पृष्ठमा "सामग्री" को आईडीको साथ जोड्नुहोस्। छवि तल DIV थप्नुहोस्:

   तपाईंको सबै सामग्री यहाँ - हेडर, अनुच्छेद, आदि सहित

   नोट: अहिले तपाईंको पृष्ठ हेर्नको लागि मनपर्छ। तस्विर विस्तारित हुनुपर्छ, तर तपाईंको सामग्री पूर्ण रूपमा हराइरहेको छ। किन? किनकि पृष्ठभूमि छवि उचाइमा 100% हो, र सामग्री विभाजन कागजातको प्रवाहमा छवि पछि हो - अधिकांश ब्राउजरहरूले यो प्रदर्शन गर्दैनन्।
   
5. तपाईंको सामग्रीलाई स्थिति बनाउनुहोस् ताकि यो सापेक्ष हो र 1 को z- सूचकांक हो। यसले यसलाई मान्य ब्राउजर माथि मान्य पृष्ठभूमिमा ल्याउनेछ। यो तपाइँको शैली पानामा थप्नुहोस्:

   #content {
   स्थिति: सापेक्ष;
   z-index: 1;
   }

1. तर तपाईं सकिएन। इन्टरनेट एक्सप्लोरर 6 मानक मान्य छैन र अझै केही समस्याहरू छन्। त्यहाँ सबै ब्राउजरबाट CSS लाई लुकाउनका लागि थुप्रै तरिकाहरू छन् तर IE6 मार्फत, तर सजिलो (कम्तीमा अन्य समस्याहरूको कारण) सम्भवतः सशर्त टिप्पणीहरू प्रयोग गर्नु हो। तपाईंको कागजातको टाउकोमा तपाइँको शैली पछाडि पछि राख्नुहोस्:

2. हाइलाइट गरिएको टिप्पणी भित्र, केही शैलीहरूसँग अर्को स्टाइल पाना जोड्न IE 6 राम्रो प्ले गर्न:

3. IE 7 र IE 8 मा पनि परीक्षण गर्न निश्चित हुनुहोस्। तपाईलाई समर्थन गर्नका लागि टिप्पणीहरू समायोजन गर्न आवश्यक हुन सक्छ। तथापि, मैले यो काम गरे जब यो काम गरे।

ठीक छ - यो भर्ती छ WAY ओभरकििल। धेरै थोरै साइटहरूले IE 7 वा 8 को समर्थन गर्न आवश्यक छ, धेरै कम IE6!

यस्तो रूपमा, यस दृष्टिकोणको लागि पुरानो र सम्भवतया अनावश्यक छ। म यसलाई यहाँ छोडेर जिज्ञासाको एक मोडको रूपमा छोड्छु किनभने चीजहरू कति अघि बढिरहेका थिए किनभने हाम्रो सबै ब्राउजरहरूले एकसाथ राम्रोसँग खेल्थे!

एक सानो स्थान मा एक खरगोश पृष्ठभूमि छवि फिक्सिंग

तपाईं आफ्नो वेब पृष्ठमा एक DIV वा अन्य तत्वमा पृष्ठभूमि पृष्ठभूमि छवि नक्कल गर्न यस्तै प्रविधिको प्रयोग गर्न सक्नुहुन्छ। यो एक बिट ट्रिकियर छ किनकि तपाईलाई पूर्ण पोजीटिङ् प्रयोग गर्नु पर्छ वा तपाईंको पेजको अन्य भागहरूको लागि अजीब स्पेसिंग मुद्दाहरू छन्।

1. पृष्ठमा छवि राख्नुहोस् जुन म पृष्ठभूमिको रूपमा प्रयोग गर्न चाहन्छु।

2. शैली पानामा, छविको लागि चौडाइ र उचाइ सेट गर्नुहोस्। नोट, तपाईं चौडाई वा उचाइको लागि प्रतिशतहरू प्रयोग गर्न सक्नुहुन्छ, तर म यसलाई लम्बाईको लागि लम्बाई मानहरूसँग समायोजन गर्न सजिलो पाउँछु।

   img # bg {
   चौडाई: 20em;
   उचाई: 30em;
   }

3. तपाईंको सामाग्री आईडी "सामग्री" को रूपमा एक माथिमा राख्नुहोस् जसको रूपमा हामी माथि गर्यौं:

   तपाईको सबै सामग्री यहाँ

4. पृष्ठभूमि छविको रूपमा एक समान चौडाई र उचाइ सामग्री सामग्री भित्री शैली:

   div # content {
   चौडाई: 20em;
   उचाई: 30em;
   }

5. त्यसपछि तस्बिरको रूपमा उही उचाइ माथि सामग्रीलाई स्थान दिनुहोस्। त्यसैले यदि तपाईंको छवि 30 मिनेट हो भने तपाईंसँग एउटा शैली हुनेछ: -30em; सामग्रीमा 1 को z-index राख्न नबिर्सनुहोस्।

   #content {
   स्थिति: सापेक्ष;
   top: -30em;
   z-index: 1;
   चौडाई: 20em;
   उचाई: 30em;
   }

6. त्यसपछि IE-6 प्रयोगकर्ताहरूको लागि -1 को z-index मा थप्नुहोस्, जस्तै तपाईंले माथि गर्नुभयो:

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

र यदि तपाईंको सामग्री साइज परिवर्तन गर्दछ भने, तपाईंलाई आफ्नो कन्टेनर र पृष्ठभूमि छविको आकार बदल्न आवश्यक छ, अन्यथा, तपाईं अजीब नतिजाहरू समाप्त गर्नुहुनेछ।