सामग्री

• पाऊल टाकण्यासाठी
• 4 पैकी 1 पद्धत: एक ठोस पार्श्वभूमी रंग सेट करणे
• पद्धत 4 पैकी: पार्श्वभूमी म्हणून चित्र वापरणे
• 4 पैकी 4 पद्धत: ग्रेडियंट पार्श्वभूमी तयार करा
• 4 पैकी 4 पद्धत वॉलपेपर म्हणून रंग अ‍ॅनिमेशन सेट करा

HTML मध्ये वेबपृष्ठाची पार्श्वभूमी सेट करण्यास सक्षम होण्यासाठी, आपल्याला फक्त "बॉडी" घटकामध्ये एक छोटासा बदल करणे आवश्यक आहे. शैली </ शैली> टॅग्ज. आपण आपले वॉलपेपर कसे पाहू इच्छिता यावर चरणे अवलंबून असतात. घन रंग, प्रतिमा, ग्रेडियंट किंवा रंग अ‍ॅनिमेशन म्हणून आपल्या वेबसाइटची पार्श्वभूमी कशी सेट करावी ते शिका.

पाऊल टाकण्यासाठी

4 पैकी 1 पद्धत: एक ठोस पार्श्वभूमी रंग सेट करणे

1. आपल्या आवडत्या मजकूर संपादकात आपली HTML फाइल उघडा. HTML5 नुसार, HTML गुणधर्म bgcolor> यापुढे समर्थित नाही. आपल्या पृष्ठाच्या इतर शैली पैलूंप्रमाणेच पार्श्वभूमी रंग देखील CSS सह सेट केलेला असणे आवश्यक आहे.
2. जोडा शैली </ शैली> आपला दस्तऐवज टॅग करते. आपल्या पृष्ठासाठी सर्व शैली डेटा (पार्श्वभूमी रंगासह) या टॅगमध्ये एन्कोड केलेला असावा. आपल्याकडे आहे का शैली> टॅग आधीच सूचित केलेले आहे, तर आपण फक्त त्या फाईलच्या त्या भागावर स्क्रोल करू शकता.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> प्रमुख> शैली </ शैली> / प्रमुख </ एचटीएमएल>

3. च्या आत "बॉडी" घटक टाइप करा शैली </ शैली> टॅग्ज. आपण CSS मधील "बॉडी" घटकामध्ये काहीही बदलले तर ते संपूर्ण पृष्ठावर परिणाम करेल.

   ! डॉक्टिव्ह एचटीएमएल> एचटीएमएल> हेड> शैली> बॉडी {} / शैली> / हेड> बॉडी </ बॉडी> / एचटीएमएल>

4. "मुख्य" घटकात "पार्श्वभूमी-रंग" गुणधर्म जोडा. या संदर्भात केवळ "रंग" ची एक शब्दलेखन कार्य करेल (रंग नाही)

   ! डॉक्टिव्ह एचटीएमएल> एचटीएमएल> प्रमुख> शैली> मुख्य भाग {पार्श्वभूमी-रंग:} / शैली> / डोके> शरीर </ शरीर> / एचटीएमएल>

5. "पार्श्वभूमी-रंग" मागे इच्छित पार्श्वभूमी रंग ठेवा. आपण आता रंगाचे नाव सूचित करू शकता (हिरवा, निळा, एड, इ.), हेक्साडेसिमल (हेक्स) कोड वापरा (उदा. #000000 काळ्यासाठी, # ff0000 लाल इत्यादीसाठी) किंवा रंगासाठी आरजीबी मूल्य टाइप करुन (जसे की आरजीबी (255,255,0) पिवळ्या साठी). खाली हेक्साडेक्सिमल कोडचे एक उदाहरण आहे, जी पार्श्वभूमी विकीहो बॅनर प्रमाणेच बनवते:

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> प्रमुख> शैली> मुख्य भाग {पार्श्वभूमी-रंग: # 93B874; } / शैली </ head> मुख्य </ b> << एचटीएमएल>

   • पांढरा: #FFFFFF
   • फिकट गुलाबी: # एफएफसीसीई 6
   • बर्न सिएना: #993300
   • इंडिगो - # 4B0082
   • जांभळा - # EE82EE
   • आपल्याला पाहिजे असलेल्या कोणत्याही रंगाचे हेक्स कोड शोधण्यासाठी डब्ल्यू 3schools.com एचटीएमएल रंग निवडक पहा.
6. इतर घटकांवर पार्श्वभूमी रंग लागू करण्यासाठी "पार्श्वभूमी-रंग" वापरा. आपण जसे शरीर घटक सेट केले त्याचप्रमाणे आपण इतर घटकांची पार्श्वभूमी सेट करण्यासाठी पार्श्वभूमीचा रंग वापरू शकता. त्या घटकांना फक्त मध्ये ठेवा शैली </ शैली> पार्श्वभूमी रंगाच्या मालमत्तेसह.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> प्रमुख> शैली> मुख्य भाग {पार्श्वभूमी-रंग: # 93B874; } एच 1 {पार्श्वभूमी-रंग: केशरी; } पी {पार्श्वभूमी-रंग: आरजीबी (255,0,0); style / शैली </ head> मुख्य << h1> या शीर्षलेखला एक नारिंगी पार्श्वभूमी </ h1> p> या परिच्छेदात लाल पार्श्वभूमी </ p> / मुख्य भाग </ html> मिळते.

पद्धत 4 पैकी: पार्श्वभूमी म्हणून चित्र वापरणे

1. मजकूर संपादकात HTML फाईल उघडा. बरेच लोक त्यांच्या वेबसाइटसाठी पार्श्वभूमी म्हणून प्रतिमा वापरण्यास प्राधान्य देतात. यासह आपण पार्श्वभूमी म्हणून एक नमुना, पोत, फोटो किंवा इतर कोणत्याही प्रतिमा सेट करू शकता. एचटीएमएल 5 वरून सर्व पार्श्वभूमी मध्ये सीएसएस (कॅस्केडिंग शैली पत्रक) सह सेट करणे आवश्यक आहे शैली </ शैली> टॅग्ज.
2. जोडा शैली </ शैली> आपल्या HTML फाइलवर टॅग. आपल्या पृष्ठासाठी सर्व शैली डेटा (पार्श्वभूमी रंगासह) या टॅगमध्ये दर्शविला जावा. आपल्याकडे आधीच आहे शैली> टॅग्ज सेट केले, फाईलच्या त्या भागावर स्क्रोल करा.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> प्रमुख> शैली </ शैली> / प्रमुख </ एचटीएमएल>

3. च्या आत "बॉडी" घटक टाइप करा शैली </ शैली> टॅग्ज. आपण CSS मधील "बॉडी" घटकामध्ये काहीही बदलले तर ते संपूर्ण पृष्ठावर परिणाम करेल.

   ! डॉक्टिव्ह एचटीएमएल> एचटीएमएल> हेड> शैली> बॉडी {} / शैली> / हेड> बॉडी </ बॉडी> / एचटीएमएल>

4. "मुख्यपृष्ठ" घटकामध्ये "पार्श्वभूमी-प्रतिमा" गुणधर्म जोडा. ही मालमत्ता जोडताना आपल्याला आपल्या प्रतिमेचे फाइल नाव आवश्यक असेल. एचटीएमएल फाइलच्या समान फोल्डरमध्ये प्रतिमा जतन केली असल्याचे सुनिश्चित करा (किंवा आपल्या वेब सर्व्हरमध्ये फाइलमध्ये संपूर्ण पथ जोडा).

   ! डॉक्ट्यूपी एचटीएमएल> एचटीएमएल> हेड> शैली> मुख्यपृष्ठ {पार्श्वभूमी-प्रतिमा: url ("imagename.png"); पार्श्वभूमी-रंग: # 93B874; } / शैली </ head> मुख्य </ b> << एचटीएमएल>

   • कोड समाविष्ट करणे चांगली कल्पना आहे पार्श्वभूमी रंग फक्त त्या पार्श्वभूमीवर प्रतिमा लोड होणार नाही.
5. एकाधिक प्रतिमा स्तर. आपण एकमेकांच्या शीर्षस्थानी अनेक प्रतिमा स्टॅक करू शकता. जर आपल्याकडे पारदर्शक पार्श्वभूमी असलेल्या प्रतिमा असतील ज्या सुपरम्पोज केल्यावर एकमेकांना पूरक असतात.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> प्रमुख> शैली> मुख्यपृष्ठ body पार्श्वभूमी-प्रतिमा: url ("image1.png"), url ("image2.gif"); पार्श्वभूमी-रंग: # 93B874; } / शैली </ head> मुख्य </ b> << एचटीएमएल>

   • प्रथम प्रतिमा शीर्षस्थानी आहे. दुसरी प्रतिमा पहिल्या खाली आहे.

4 पैकी 4 पद्धत: ग्रेडियंट पार्श्वभूमी तयार करा

1. ग्रेडियंट पार्श्वभूमी तयार करण्यासाठी CSS वापरा. जर आपण एखाद्या ठोस रंगापेक्षा थोडे अधिक शैलीकृत काहीतरी शोधत असाल परंतु रंग अ‍ॅनिमेशनइतके व्यस्त नसले तर ग्रेडियंट पार्श्वभूमी वापरुन पहा. ग्रेडियंट्स असे रंग आहेत जे इतर समानतेत बदलतात. आपण आपला ग्रेडियंट तयार आणि समायोजित करण्यासाठी CSS वापरू शकता. आपण रंग ग्रेडियंट तयार करण्यापूर्वी, आपण सीएसएस सह वेबपृष्ठ स्वरूपित करण्याच्या मूलभूत गोष्टींबद्दल पुरेसे ज्ञान प्राप्त केले पाहिजे.
2. मानक वाक्यरचना समजून घ्या. ग्रेडियंट तयार करताना, आपल्याला आवश्यक असलेल्या माहितीचे दोन तुकडे आहेत: प्रारंभिक बिंदू आणि प्रारंभ होणारा कोन आणि ज्या रंगांमध्ये संक्रमण होईल. आपण सर्व आच्छादित असलेले अनेक रंग निवडू शकता आणि आपण ग्रेडियंटसाठी दिशा किंवा कोन निर्दिष्ट करू शकता.

   पार्श्वभूमी: रेखीय-ग्रेडियंट (दिशा / कोन, कलर 1, कलर 2, कलर 3 इ.);

3. अनुलंब ग्रेडियंट तयार करा. आपण दिशा निर्देशित न केल्यास रंग वरपासून खालपर्यंत चालेल. भिन्न ब्राउझरमध्ये ग्रेडियंट फंक्शनची भिन्न आवृत्त्या असतात, म्हणून आपल्याला कोडच्या भिन्न आवृत्त्या जोडण्याची आवश्यकता असेल.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> हेड> शैली> एचटीएमएल {मिनिट उंची: 100%; / * हे सुनिश्चित करणे आवश्यक आहे की ग्रेडियंट संपूर्ण पृष्ठ} * /} बॉडी {पार्श्वभूमीवर पसरलेला आहे: -वेबकिट-रेखीय-ग्रेडियंट (# 93B874, # C9DCB9); / * क्रोम 10+, सफारी 5.1+ * / पार्श्वभूमी: -ओ-रेखीय-ग्रेडियंट (# 93B874, # सी 9 डीसीबी 9); / * ऑपेरा 11.1+ * / पार्श्वभूमी: -मोझ-रेखीय-ग्रेडियंट (# 93B874, # सी 9 डीसीबी 9); / * फायरफॉक्स 3.6+ * / पार्श्वभूमी: रेखीय-ग्रेडियंट (# 93B874, # C9DCB9); / * डीफॉल्ट वाक्यरचना (अंतिम असणे आवश्यक आहे) * / पार्श्वभूमी-रंग: # 93B874; / * ग्रेडियंट लोड होत नसल्यास पार्श्वभूमीचा रंग सेट करणे चांगली कल्पना आहे * /} / शैली> / डोके> शरीर </ b>> <html>

4. दिशेने एक ग्रेडियंट तयार करा. ग्रेडियंटला दिशा जोडणे आपल्याला रंग बदलण्याच्या मार्गावर समायोजित करण्याची परवानगी देते. लक्षात ठेवा की भिन्न ब्राउझर दिशानिर्देशांचे भिन्न अर्थ लावतात. ते सर्व समान रंग ग्रेडियंट दर्शवतील.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> डोके> शैली> एचटीएमएल {मिनिट उंची: 100%; } मुख्य भाग {पार्श्वभूमी: -वेबकिट-रेखीय-ग्रेडियंट (डावीकडे, # 93B874, # C9DCB9); / * डावीकडून उजवीकडे * / पार्श्वभूमी: -ओ-रेखीय-ग्रेडियंट (उजवीकडे, # 93B874, # C9DCB9); / * शेवट उजवीकडे * / पार्श्वभूमी: -मोझ-रेखीय-ग्रेडियंट (उजवीकडे, # 93B874, # C9DCB9); / * शेवटी उजवीकडे * / पार्श्वभूमी: रेखीय-ग्रेडियंट (उजवीकडे, # 93B874, # C9DCB9); / * उजवीकडील बाजूस moves * / पार्श्वभूमी-रंग: # 93B874; / * एक पार्श्वभूमी रंग सेट करणे चांगले आहे, जर ग्रेडियंट लोड होणार नसेल तर * /} / शैली> / डोके> शरीर </ b>> <html>

5. ग्रेडियंट समायोजित करण्यासाठी इतर गुणधर्म वापरा. ग्रेडियंट्ससह आपण बरेच काही करू शकता.
   • उदाहरणार्थ, आपण केवळ दोनपेक्षा जास्त रंग वापरू शकत नाही तर त्या प्रत्येकाच्या मागे टक्केवारी देखील ठेवू शकता. यासह आपण प्रत्येक रंग विभागात किती जागा मिळवू शकता हे दर्शवू शकता.

     पार्श्वभूमी: रेखीय-ग्रेडियंट (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • रंगांमध्ये पारदर्शकता जोडा. यासह आपण रंग फिकट करू शकता. रंगापासून काहीच फिकट होण्यासाठी समान रंग वापरा. आपल्याला फंक्शन आवडेल आरजीबा () रंग दर्शविण्यासाठी वापरणे आवश्यक आहे. अंतिम मूल्य पारदर्शकतेची डिग्री निश्चित करते: 0 अपारदर्शक आणि 1 पारदर्शक साठी.

     पार्श्वभूमी: रेखीय ग्रेडियंट (उजवीकडे, आरजीबा (147,184,116.0), आरजीबा (147,184,116.1));

4 पैकी 4 पद्धत वॉलपेपर म्हणून रंग अ‍ॅनिमेशन सेट करा

1. वर नेव्हिगेट करा शैली> आपल्या एचटीएमएल कोडमध्ये. आपल्‍याला एक ठोस पार्श्वभूमी रंग आढळल्यास परंतु रंगाची पार्श्वभूमी बदलण्याचा प्रयोग करा. एचटीएमएल 5 वरून, पार्श्वभूमी रंग CSS (कॅस्केडिंग शैली पत्रक) सह परिभाषित केले जाणे आवश्यक आहे. आपण सीएसएस सह कधीही पार्श्वभूमी रंग सेट न केल्यास, ही पद्धत वापरण्यापूर्वी ठोस पार्श्वभूमी रंग सेट करण्याचा विभाग वाचा.
2. प्रॉपर्टी जोडा अ‍ॅनिमेशन "शरीर" घटक. आपल्याला दोन भिन्न गुणधर्म जोडावे लागतील कारण प्रत्येक ब्राउझरला भिन्न कोड आवश्यक असतो.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> हेड> शैली> बॉडी we -वेबकिट-अ‍ॅनिमेशन: कलरचेंज 60 चे अनंत; अ‍ॅनिमेशन: रंग बदल 60s अनंत; } / शैली </ head> मुख्य </ b> << एचटीएमएल>

   • -वेबकीट-अ‍ॅनिमेशन क्रोम-आधारित ब्राउझर (क्रोम, ऑपेरा, सफारी) साठी मालमत्ता आवश्यक आहे. अ‍ॅनिमेशन इतर सर्व ब्राउझरसाठी मानक आहे.
   • रंग बदल या उदाहरणात अ‍ॅनिमेशन असे म्हणतात.
   • 60 चे दशक अ‍ॅनिमेशन / संक्रमणाचा कालावधी (60 सेकंद) आहे. वेबकिट आणि डीफॉल्ट वाक्यरचना दोन्हीसाठी हे निश्चित केल्याचे सुनिश्चित करा.
   • अनंत अ‍ॅनिमेशन अनिश्चित काळासाठी पुनरावृत्ती होईल हे दर्शवते. आपण रंगांना पळवाट देण्यास प्राधान्य दिल्यास आणि नंतर शेवटच्या रंगावर थांबल्यास आपण हा भाग वगळू शकता.
3. आपल्या अ‍ॅनिमेशनमध्ये रंग जोडा. आता आपण @keyframes नियम वापरुन पार्श्वभूमीचे रंग सेट करण्यासाठी तसेच प्रत्येक रंग पृष्ठावर किती काळ दिसू शकतो हे सेट करण्यासाठी वापरणार आहात. पुन्हा, आपल्याला विविध ब्राउझरसाठी एकाधिक एन्कोडिंग्ज जोडाव्या लागतील.

   ! डॉक्टव्य एचटीएमएल> एचटीएमएल> हेड> शैली> बॉडी we -वेबकिट-अ‍ॅनिमेशन: कलरचेंज 60 चे अनंत; अ‍ॅनिमेशन: रंग बदल 60s अनंत; } @ -webkit- कीफ्रेम्स रंग बदल {0% {पार्श्वभूमी: # 33FFF3;} 25% {पार्श्वभूमी: # 78281F;} 50% {पार्श्वभूमी: # 117A65;} 75% {पार्श्वभूमी: # DC7633;} 100% {पार्श्वभूमी: # 9B59B6; key} @keyframes रंग बदल {0% {पार्श्वभूमी: # 33FFF3;} 25% {पार्श्वभूमी: # 78281F;} 50% {पार्श्वभूमी: # 117A65;} 75% {पार्श्वभूमी: # DC7633;} 100% {पार्श्वभूमी: # 9 बी 59 बी 6;}} / स्टाईल </ b> << शरीर> / बॉडी </ html>

   • लक्षात घ्या की दोन ओळी (@ -webkit- कीफ्रेम्स आणि @keyframes पार्श्वभूमी रंग आणि टक्केवारीसाठी समान मूल्ये आहेत. तो एकसमान राहिला पाहिजे जेणेकरून सर्व ब्राउझरसाठी अनुभव समान राहील.
   • टक्केवारी (0%, 25%, इ.) अ‍ॅनिमेशनच्या एकूण कालावधीचे प्रतिनिधित्व करतात (60 चे दशक). जेव्हा पृष्ठ लोड होते, तेव्हा पार्श्वभूमीवर रंग सेट केला जाईल 0% आणि (# 33FFF3). जेव्हा अ‍ॅनिमेशनच्या 25% किंवा 60 सेकंदांनी प्ले केले असेल, तेव्हा पार्श्वभूमीमध्ये संक्रमित होईल # 78281F, इत्यादी.
   • आपण इच्छित कालावधी आणि रंग समायोजित करू शकता.