नेस्टिङ साइट: पृष्ठभूमिमा तस्वीर कसरी बनाउने HTML

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

आधारभूत HTML ट्याग पृष्ठभूमिमा सिर्जना गर्न

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

1. ट्याग विशेषता लेख्नुहोस्।
2. HTML कोड मा CSS शैली मार्फत।
3. छुट्टै फाइल मा CSS शैलीहरू लेख्नुहोस्।

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

1. ट्याग विशेषता (शरीर) index.htm फाइलमा मार्फत पहिलो रेकर्डिङ विधि। (शरीर पृष्ठभूमि = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ शरीर): यो फारम भण्डारण गरिएको छ। हामी शीर्षक «चित्र» र विस्तार JPG, र हामी नाम «चित्रहरु», त्यसपछि HTML-कोड प्रविष्टि यो हेर्नेछ फोल्डर संग एक तस्वीर छ भने कि, छ: (शरीर पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") ... (/ शरीर) ।
2. दोस्रो विधि एक CSS शैली रेकर्ड समावेश, तर यो नाम index.htm संग नै फाइल मा लेखिएको छ। (शारीरिक शैली = "पृष्ठभूमि: URL ( '../ तस्बिरहरू / Picture.jpg')")।
3. रेकर्डिङ को तेस्रो विधि दुई फाइलहरू बनेको छ। (टाउको) (लिंक rel = "शैलीपाना" type = "text / CSS" href = "http: // साइट / लेख / 193110 /% D0% 9 फ .नहीं नाम index.htm ट्याग (टाउको) सँग कागजात यस्तो लाइन लेखिएको छ % डी 1% 83% डी 1% 82% डी 1% 8C_% D0% बीए CSS_faylu ") (/ टाउको)। फाइल भनिन्छ style.css शैली पहिले नै लेख्न: शरीर {पृष्ठभूमि: URL (तस्बिरहरू / Picture.jpg ')}।

पृष्ठभूमिमा छवि बनाउन HTML मा, हामीले बुझ्न। अब तपाईं कसरी सम्पूर्ण स्क्रिनको चौडाई मार्फत छवि सुत्छन् बाहिर आंकडा गर्न आवश्यक छ।

विन्डो को चौडाई गर्न पृष्ठभूमि छवि सुत्छन् तरिकाहरू

हामी एक प्रतिशत को रूप मा हाम्रो स्क्रिन प्रतिनिधित्व गर्छ। यो स्क्रिन सम्पूर्ण चौडाई र लम्बाइ × 100% 100% हुनेछ बाहिर जान्छ। हामी यो चौडाइ गर्न छविमा सुत्छन् गर्न आवश्यक छ। छवि फाइल रेकर्डिङ style.css लाइन छवि निगरानी सम्पूर्ण चौडाई र लम्बाइ भन्दा सुत्छन् हुनेछ थप्नुहोस्। यो CSS शैली मा लेखिएको छ रूपमा? यसलाई सरल छ!

शरीर

{

पृष्ठभूमि: URL (तस्बिरहरू / Picture.jpg ')

पृष्ठभूमि आकार: 100%; / * यो पोस्ट अधिकांश आधुनिक ब्राउजर लागि उपयुक्त छ * /

}

त्यसैले हामी स्क्रिनमा HTML मा एक तस्वीर पृष्ठभूमि कसरी बनाउने बाहिर समझ। को index.htm फाइल रेकर्ड को एक विधि पनि छ। यो विधि र पुरानो, तर शुरुआती लागि यो आवश्यक थाहा र बुझ्न छ। ट्याग (टाउको) (शैली) div {पृष्ठभूमि आकार: आवरण; } (/ शैली) (/ टाउको), यो रेकर्ड हामी विन्डो सम्पूर्ण चौडाई भन्दा अवस्थित गरिने पृष्ठभूमिमा, लागि विशेष एकाइ आवंटित भन्ने हो। हामी छवि आधुनिक ब्राउजर को कुनै पनि पर्दा सम्पूर्ण चौडाई गर्न फैलएको छ भनेर कसरी, एक पृष्ठभूमि तस्वीर HTML साइट बनाउन दुई तरिकामा, छलफल गरेका छन्।

एक निश्चित पृष्ठभूमि कसरी बनाउने

तपाईं भविष्यमा वेब स्रोत को पृष्ठभूमि रूपमा चित्र प्रयोग गर्ने निर्णय भने तपाईं बस यसलाई निश्चित कसरी बनाउने थाहा, यो लम्बाइमा फैलएको छ र सौंदर्य उपस्थिति बिगार्छ थिएन भनेर आवश्यक छ। बस द्वारा HTML कोड प्रयोग गरेर एउटा सानो साथै दर्ता गर्न। तपाईं पृष्ठभूमि पछि वाक्यांश थप्न style.css फाइल गर्न आवश्यक: (तस्बिरहरू / Picture.jpg ') URL निश्चित; वा यसको सट्टा अर्धविराम अलग लाइन पछि थपियो - स्थिति: मिलाएका छौं। त्यसैले, आफ्नो वालपेपर तय गरिनेछ। साइटमा सामग्री स्क्रोल समयमा, तपाईं पाठ रेखाहरू सार्दै देख्ने, तर पृष्ठभूमिमा ठाउँमा रहिरहन्छ। त्यसैले तपाईं कसरी धेरै तरिकामा HTML पृष्ठभूमि छवि गर्न सिके।

HTML मा टेबल संग काम

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

पृष्ठभूमिमा सट्टा तस्वीर संग तालिका: HTML उदाहरण

एक 2x3 तालिका आकर्षित र यो फोल्डर "तस्बिरहरू" मा भण्डारण गरिएका पृष्ठभूमि छवि बनाउन: (तालिका पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ तालिका)। त्यसैले हाम्रो तालिका तस्वीरको पृष्ठभूमिमा आएको गरिनेछ।

अब 2x3 को नै प्लेट आकार आकर्षित, तर संख्यात्मक 1, 4, 5 र 6 (तालिका) स्तम्भहरू (tr) मा एक तस्वीर (td पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") 1 (/ td) (td) 2 सम्मिलित (/ td) (td) 3 (/ td) (/ tr) (tr) (td पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") 4 (/ td) (td पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") 5 ( / td) (td पृष्ठभूमि = "तस्बिरहरू / Picture.jpg") 6 (/ td) (/ tr) (/ तालिका)। हामी पृष्ठभूमिमा देखिने मात्र हामी दर्ता, र जो सारा तालिका ती कक्षहरू मा देख्न सक्नुहुन्छ हेरेपछि।

क्रस-ब्राउजर अनुकूलताको साइट

त्यहाँ एक क्रस-ब्राउजर अनुकूलताको वेब स्रोत रूपमा यस्तो कुरा हो। यो आफ्नो साइट उत्तिकै राम्रो विभिन्न प्रकारका र ब्राउजर को संस्करण मा प्रदर्शित हुन्छ भन्ने हो। यो हुनुपर्छ HTML कोड एक आवश्यक ब्राउजर अनुकूलन गर्न र CSS शैलीहरू। यसबाहेक, फोन स्मार्ट को आधुनिक युग मा, धेरै वेब विकासकर्ताहरूले साइटहरु सिर्जना गर्न प्रयास र मोबाइल संस्करण र एक कम्प्युटर नजर लागि छाँटकाँट छन्।