कैसे HTML में बैकग्राउंड कलर सेट करें (Set Background Color in HTML)

आर्टिकल डाउनलोड करें
सहयोगी लेखक द्वारा Jessica Andzouana

रेफरेन्स

आर्टिकल डाउनलोड करें

HTML में किसी वेबपेज (Webpage) का बैकग्राउंड कलर सेट करने के लिए आपको बस "body" एलिमेंट (element) के अंदर मौजूद <style></style> टैग्स (tags) के अंतर्गत, बहुत छोटे से बदलाव करना होगा। अब आप किस प्रकार का बैकग्राउंड चाहते हैं, आगे के स्टेप्स भी उसी के अनुसार अलग हो सकते हैं। आपकी वेबसाइट के बैकग्राउंड को सॉलिड कलर, इमेज (फोटो), ग्रेडिएंट (एक समयसीमा के अंदर बदलते हुए कलर्स का ग्रुप) या फिर रंग-बिरंगे एनीमेशन (Animation) की तरह सेट करने के लिए, हमारे लेख को पढ़ें।

विधि 1
विधि 1 का 4:

एक सॉलिड बैकग्राउंड कलर सेट करना (Setting a Solid Background Color)

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/2609629-1-1.jpg\/v4-460px-2609629-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/2609629-1-1.jpg\/v4-728px-2609629-1-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    आपकी HTML फाइल को आपके पसंदीदा टेक्स्ट एडिटर में खोलें: अब जैसे कि HTML5 में, <bgcolor> HTML एट्रिब्यूट (attribute) अब सपोर्ट नहीं करते। बैकग्राउंड कलर के साथ ही आपके पेज के अन्य सारे पहलुओं को CSS का इस्तेमाल करके संभाला जाना चाहिए। [१]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f4\/2609629-2-1.jpg\/v4-460px-2609629-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f4\/2609629-2-1.jpg\/v4-728px-2609629-2-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आपके पेज की सारी स्टाइल इन्फोर्मेशन (जिसमें बैकग्राउंड कलर भी शामिल है), को इन्हीं टैग्स के बीच में कोड किया जाना चाहिए। यदि आपके पास पहले से ही <style> टैग्स सेट मौजूद हैं, तो फाइल के अन्य भाग पर स्क्रॉल करें। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 </ 
 style 
 > 
 </ 
 head 
 > 
 </ 
 html 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/2609629-3-1.jpg\/v4-460px-2609629-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/2609629-3-1.jpg\/v4-728px-2609629-3-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आप CSS के अंदर "body" एलिमेंट में जो कुछ भी करेंगे, वो आपको पूरे पेज को प्रभावित करेगा। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/2609629-4-1.jpg\/v4-460px-2609629-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/2609629-4-1.jpg\/v4-728px-2609629-4-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब इस संदर्भ में, सिर्फ "color" भी इसका काम करेगा। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 background-color 
 : 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c9\/2609629-5-1.jpg\/v4-460px-2609629-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/2609629-5-1.jpg\/v4-728px-2609629-5-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आपकी पसंद का कलर, "background-color" प्रॉपर्टी में एड कर दीजिये: आप कलर को नाम ( green , blue , red आदि) के अनुसार लिख सकते हैं, आप जिस कलर को रखना चाहते हैं, उसके लिए हेक्साडेसीमल (hex) कोड्स का इस्तेमाल करें (जैसे कि, काले कलर के लिए #000000 , लाल रंग के लिए #ff0000 आदि) या फिर कलर की आरजीबी (RGB) वैल्यू (जैसे कि rgb(255,255,0) पीले रंग के लिए) भी इस्तेमाल कर सकते हैं। हेक्स कोड का इस्तेमाल करते हुए नीचे एक उदाहरण दिया गया है, जो कि बिलकुल विकीहाउ (wikiHow) बैनर के ही कलर की तरह एक बैकग्राउंड सेट करके देगा: 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 background-color 
 : 
 #93B874 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • सफ़ेद (White): #FFFFFF
    • हल्का गुलाबी (Light Pink): #FFCCE6
    • गहरा ब्राउन (Burnt Sienna): #993300
    • नीला (Indigo) - #4B0082
    • बैंगनी (Violet) - #EE82EE
    • किसी भी कलर के हेक्स कोड्स की जानकारी पाने के लिए w3schools.com HTML Color Picker पर जाएँ।
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/43\/2609629-6-1.jpg\/v4-460px-2609629-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/43\/2609629-6-1.jpg\/v4-728px-2609629-6-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अन्य एलिमेंट के लिए बैकग्राउंड कलर अप्लाई करने के लिए "background-color" का इस्तेमाल करें: बिलकुल वैसे ही जैसे आपने बॉडी एलिमेंट सेट किया है, वैसे ही अन्य एलिमेंट के बैकग्राउंड कलर को परिभाषित करने के लिए background-color का इस्तेमाल करें। अब इन एलिमेंट्स को बैकग्राउंड प्रॉपर्टी के साथ <style></style> के अंदर लिखें। [२] 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 background-color 
 : 
 #93B874 
 ; 
 } 
 h1 
 { 
 background-color 
 : 
 orange 
 ; 
 } 
 p 
 { 
 background-color 
 : 
 rgb 
 ( 
 255 
 , 
 0 
 , 
 0 
 ); 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
 इस 
 ह 
 ै 
 डर 
 म 
 ें 
 न 
 ा 
 र 
 ं 
 ग 
 ी 
 ब 
 ै 
 कग 
 ् 
 र 
 ा 
 उ 
 ं 
 ड 
 ह 
 ो 
 ग 
 ा 
 </ 
 h1 
 > 
 < 
 p 
 > 
 इस 
 प 
 ै 
 र 
 ा 
 ग 
 ् 
 र 
 ा 
 फ 
 क 
 ा 
 ब 
 ै 
 कग 
 ् 
 र 
 ा 
 उ 
 ं 
 ड 
 ल 
 ा 
 ल 
 ह 
 ो 
 ग 
 ा 
 </ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
विधि 2
विधि 2 का 4:

किसी इमेज को बैकग्राउंड के तौर पर इस्तेमाल करना (Using an Image as a Background)

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f6\/2609629-7-1.jpg\/v4-460px-2609629-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f6\/2609629-7-1.jpg\/v4-728px-2609629-7-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    बहुत सारे लोग, उनकी वेबसाइट में बैकग्राउंड के तौर पर किसी फोटो का इस्तेमाल करना पसंद करते हैं। इसकी मदद से आप आपकी वेबसाइट के बैकग्राउंड को एक पैटर्न, टेक्सचर, फोटो या फिर किसी और तरह की फोटो की तरह सेट कर सकते हैं। HTML5 के अनुसार, हर एक तरह के बैकग्राउंड को CSS (Cascading Style Sheets) के साथ <style></style> टैग्स के अंदर ही सेट होना चाहिए।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/2609629-8-1.jpg\/v4-460px-2609629-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2609629-8-1.jpg\/v4-728px-2609629-8-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आपके पेज की सारी स्टाइल इन्फोर्मेशन (जिसमें बैकग्राउंड कलर भी शामिल है), को इन्हीं टैग्स के बीच में कोड किया जाना चाहिए। यदि आपके पास पहले से ही <style> टैग्स सेट मौजूद हैं, तो फाइल के अन्य भाग पर स्क्रॉल करें। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 </ 
 style 
 > 
 </ 
 head 
 > 
 </ 
 html 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/2609629-9-1.jpg\/v4-460px-2609629-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/2609629-9-1.jpg\/v4-728px-2609629-9-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आप CSS में "body" एलिमेंट में जो कुछ भी करेंगे, वो आपको पूरे पेज को प्रभावित करेगा। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bb\/2609629-10-1.jpg\/v4-460px-2609629-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bb\/2609629-10-1.jpg\/v4-728px-2609629-10-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    जब आप इस प्रॉपर्टी को एड करते हैं, तो आपको आपकी इमेज या पिक्चर के फाइल नेम की जरूरत पड़ेगी। बस एक बात की पुष्टि कर लें कि आपकी ये इमेज फाइल भी उसी फोल्डर में स्टोर है, जिसमें आपकी HTML फाइल (या फिर आपके वेब सर्वर पर उस फाइल का पूरा पाथ (Path) एंटर करें)। [३] 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 background-image 
 : 
 url 
 ( 
 "imagename.png" 
 ); 
 background-color 
 : 
 #93B874 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • यदि आप background-color प्रॉपर्टी को भी एड करते हैं, तो ये आपके लिए एक अच्छा विचार होगा, ये प्रॉपर्टी उस समय आपके काम आएगी, जब आपकी बैकग्राउंड इमेज लोड नहीं हो पाएगी।
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7f\/2609629-11-1.jpg\/v4-460px-2609629-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7f\/2609629-11-1.jpg\/v4-728px-2609629-11-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    आप चाहें तो एक के ऊपर एक, बहुत सारी फोटो भी इस्तेमाल कर सकते हैं। ये तब और भी ज्यादा बेहतर लगेगा, जबकि आपके पास ऐसी फोटो मौजूद होंगी, जो कि पारदर्शी हों और जो जब एक-दूसरे के ऊपर परत में लगें, तो साथ अच्छी लगें। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 background-image 
 : 
 url 
 ( 
 "image1.png" 
 ), 
 url 
 ( 
 "image2.gif" 
 ); 
 background-color 
 : 
 #93B874 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • अब जो पहली इमेज है, वो सबसे ऊपर नजर आएगी। दूसरी इमेज, उस पहली इमेज के पीछे नजर आएगी।
विधि 3
विधि 3 का 4:

ग्रेडिएंट बैकग्राउंड (Gradient Background) तैयार करना

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/2609629-12.jpg\/v4-460px-2609629-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/2609629-12.jpg\/v4-728px-2609629-12.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ग्रेडिएंट बैकग्राउंड तैयार करने के लिए CSS का इस्तेमाल करें: यदि आप सॉलिड कलर से भी ज्यादा कुछ और भी स्टाइलिश पाना चाहते हैं, और बहुत ज्यादा मल्टी-कलर्ड एनीमेशन की तरह भी कुछ नहीं चाहते, तो फिर आपको ग्रेडिएंट बैकग्राउंड का इस्तेमाल करना चाहिए। ग्रेडिएंट, ये एक तरह का कलर ही होता है, जो अन्य किसी कलर के साथ मिलकर धुंधला होता जाता है और अंत में वो दूसरा कलर दर्शाता है। आप चाहें तो आपके ग्रेडिएंट को कस्टमाइज करने के लिए CSS का इस्तेमाल कर सकते हैं। इसके पहले कि आप ग्रेडिएंट तैयार करें, इस बात की पुष्टि कर लें कि आपको CSS के जरिये पेज को स्टाइल तैयार करने के बेसिक्स की जानकारी है।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/2609629-13.jpg\/v4-460px-2609629-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/2609629-13.jpg\/v4-728px-2609629-13.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ग्रेडिएंट तैयार करने के दौरान आपको इन दो तरह की जानकरी की जरूरत होगी: शुरुआती बिंदु/एंगल और वो कलर जिनके बीच में ग्रेडिएंट परिवर्तित होगा। आप ग्रेडिएंट के परिवर्तित होने के लिए बहुत सारे रंगों को भी चुन सकते हैं, और आप चाहें तो ग्रेडिएंट के लिए एक दिशा या एंगल को भी सेट कर सकते हैं। [४] 
     background 
 : 
 linear-gradient 
 ( 
 direction 
 / 
 angle 
 , 
 color1 
 , 
 color2 
 , 
 color3 
 , 
 etc 
 .);
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/2609629-14.jpg\/v4-460px-2609629-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/2609629-14.jpg\/v4-728px-2609629-14.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    यदि आप किसी दिशा को सेट नहीं करते हैं, तो आपका ग्रेडिएंट ऊपर से नीचे जाएगा। अलग-अलग ब्राउज़र, ग्रेडिएंट फंक्शन को अलग-अलग ढ़ंग से लागू करते हैं, तो आपको भी कोड के अलग-अलग वर्जन का इस्तेमाल करना होगा। 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 html 
 { 
 min-height 
 : 
 100 
 % 
 ; 
 /* ये बहुत जरूरी होता है, क्योंकि ये ही इस बात की पुष्टि करेगा कि आपका ग्रेडिएंट पूरे पेज पर घूमेगा */ 
 } 
 body 
 { 
 background 
 : 
 -webkit- 
 linear-gradient 
 ( 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* Chrome 10+, Safari 5.1+ */ 
 background 
 : 
 -o- 
 linear-gradient 
 ( 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* Opera 11.1+ */ 
 background 
 : 
 -moz- 
 linear-gradient 
 ( 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* Firefox 3.6+ */ 
 background 
 : 
 linear-gradient 
 ( 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* Standard syntax (must be last) */ 
 background-color 
 : 
 #93B874 
 ; 
 /* It's a good idea to set a background color in case the gradient doesn't load */ 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/2609629-15.jpg\/v4-460px-2609629-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/2609629-15.jpg\/v4-728px-2609629-15.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ग्रेडिएंट में दिशा सेट करके आप आपके ग्रेडिएंट पर कलर बदलने के तरीके को सेट कर सकते हैं। एक बात का ध्यान रखें कि अलग-अलग ब्राउज़र, दिशा को अलग-अलग ढ़ंग से लागू करती है। सारे ही परिणामस्वरूप एक समान ग्रेडिएंट ही देंगी। [५] 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 html 
 { 
 min-height 
 : 
 100 
 % 
 ; 
 } 
 body 
 { 
 background 
 : 
 -webkit- 
 linear-gradient 
 ( 
 left 
 , 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* from left to right */ 
 background 
 : 
 -o- 
 linear-gradient 
 ( 
 right 
 , 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* ending on the right */ 
 background 
 : 
 -moz- 
 linear-gradient 
 ( 
 right 
 , 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* ending on the right */ 
 background 
 : 
 linear-gradient 
 ( 
 to 
 right 
 , 
 #93B874 
 , 
 #C9DCB9 
 ); 
 /* moving to the right */ 
 background-color 
 : 
 #93B874 
 ; 
 /* यदि किसी भी परिस्थिति में ग्रेडिएंट लोड नहीं हो पाता है, तो ऐसी स्थिति के लिए बैकग्राउंड कलर सेट करना आपके लिए मददगार साबित होगा */ 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/2609629-16.jpg\/v4-460px-2609629-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/2609629-16.jpg\/v4-728px-2609629-16.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ग्रेडिएंट को एडजस्ट करने के लिए अन्य प्रॉपर्टीज इस्तेमाल करें। ग्रेडिएंट के साथ कर सकने के लिए बहुत कुछ मौजूद है।
    • जैसे कि, ना सिर्फ आप दो से ज्यादा कलर एड कर सकते हैं, बल्कि आप हर एक के बाद में परसेंटेज (प्रतिशत) भी रख सकते हैं। इस तरह से आप हर एक रंग के बीच में कितनी जगह रखना चाहते हैं, उसे भी निश्चित कर सकते हैं। 
       background 
 : 
 linear-gradient 
 ( 
 # 
 93B874 
 10 
 %, 
 # 
 C9DCB9 
 70 
 %, 
 # 
 000000 
 90 
 %);
    • कलर में पारदर्शिता (transparency) जोड़ें: इससे कलर धुँधला होता जाएगा। आप आपके द्वारा चुने हुए कलर को उस रंग से रंगहीन होने के लिए इस्तेमाल करें। अब आपको रंगों को परिभाषित करने के लिए rgba() फंक्शन का इस्तेमाल करें। अब इसमें जो अंतिम संख्या होगी, वो रंग की पारदर्शिता को दर्शाएगी: जिसमें 0 होगा एकदम सॉलिड रंग के लिए और 1 होगा पारदर्शी रंग के लिए। 
       background 
 : 
 linear-gradient 
 ( 
 to 
 right 
 , 
 rgba 
 ( 
 147 
 , 
 184 
 , 
 116 
 , 
 0 
 ), 
 rgba 
 ( 
 147 
 , 
 184 
 , 
 116 
 , 
 1 
 ));
विधि 4
विधि 4 का 4:

बदलते हुए रंगों वाला बैकग्राउंड सेट करना (Setting a Background that Changes Colors)

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/2609629-17.jpg\/v4-460px-2609629-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/2609629-17.jpg\/v4-728px-2609629-17.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    यदि कोई एक और ठोस रंग का बैकग्राउंड तैयार करना, आपको पसंद नहीं है, तो ऐसे में आपको एक एनिमेटेड और रंग बदलते हुए बैकग्राउंड को इस्तेमाल करके देख लेना चाहिए। जैसे कि HTML 5 में, बैकग्राउंड कलर्स CSS (Cascading Style Sheets) के द्वारा ही परिभाषित होते हैं। यदि आपने इसके पहले बैकग्राउंड कलर बदलने के लिए कभी भी CSS का इस्तेमाल नहीं किया है, तो फिर इस विधि का इस्तेमाल करने से पहले ऊपर दी हुई सॉलिड बैकग्राउंड कलर सेट करने की विधि को देखें।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/2609629-18.jpg\/v4-460px-2609629-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/2609629-18.jpg\/v4-728px-2609629-18.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब इस एनिमेशन प्रॉपर्टी को "body" एलिमेंट में एड कर दें: अब जैसे कि अलग-अलग ब्राउज़र, के लिए अलग-अलग कोड इस्तेमाल होता है, तो इसलिए इसके लिए आपके पास में 2 अलग-अलग प्रॉपर्टीज होंगी। [६] 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 -webkit- 
 animation 
 : 
 colorchange 
 60 
 s 
 infinite 
 ; 
 animation 
 : 
 colorchange 
 60 
 s 
 infinite 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • -webkit-animation इस प्रॉपर्टी की जरूरत आपको क्रोमियम-बेस्ड (Chromium-based) ब्राउज़र (जैसे कि, क्रोम ओपेरा और सफारी) के लिए होगी। animation ये बाकी सारे ब्राउज़र के लिए उपयुक्त है।
    • colorchange आप इस उदाहरण में जिसे एनिमेशन कहेंगे।
    • 60s ये एनिमेशन में बदलाव की समयसीमा (60 सेकंड) होगी। इसे वेबकिट (webkit) और स्टैंडर्ड (standard) सिंटेक्स, दोनों पर ही इस्तेमाल करना ना भूलें।
    • infinite ये एनिमेशन को हमेशा के लिए दोहराते रहने की सेटिंग कर देता है। यदि आपने कलर लूप (colors loop) को सिर्फ एक ही बार के लिए सेट किया है और आखिरी कलर पर रुकने को सेट किया है, तो फिर आप इस भाग को छोड़ सकते हैं।
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/2609629-19.jpg\/v4-460px-2609629-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/2609629-19.jpg\/v4-728px-2609629-19.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अब आप बैकग्राउंड कलर्स सेट करने के लिए @keyframes नियम का इस्तेमाल करेंगे, जिसकी मदद से आपका ये आवर्तन चलता रहेगा और साथ ही हर कलर के लिए सेट किया गया समय भी पेज पर नजर आएगा। यहाँ पर भी आपको अलग-अलग तरह की ब्राउज़र के लिए, अलग-अलग एंट्री करना पड़ेंगी। [७] 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 -webkit- 
 animation 
 : 
 colorchange 
 60 
 s 
 infinite 
 ; 
 animation 
 : 
 colorchange 
 60 
 s 
 infinite 
 ; 
 } 
 @ 
 -webkit-keyframes 
 colorchange 
 { 
 0 
 % 
 { 
 background 
 : 
 #33FFF3 
 ;} 
 25 
 % 
 { 
 background 
 : 
 #78281F 
 ;} 
 50 
 % 
 { 
 background 
 : 
 #117A65 
 ;} 
 75 
 % 
 { 
 background 
 : 
 #DC7633 
 ;} 
 100 
 % 
 { 
 background 
 : 
 #9B59B6 
 ;} 
 } 
 @ 
 keyframes 
 colorchange 
 { 
 0 
 % 
 { 
 background 
 : 
 #33FFF3 
 ;} 
 25 
 % 
 { 
 background 
 : 
 #78281F 
 ;} 
 50 
 % 
 { 
 background 
 : 
 #117A65 
 ;} 
 75 
 % 
 { 
 background 
 : 
 #DC7633 
 ;} 
 100 
 % 
 { 
 background 
 : 
 #9B59B6 
 ;} 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • इस बात को ध्यान में रखिये कि ( @-webkit-keyframes और @keyframes , इन दोनों ही नियमों में एक से बैकग्राउंड और कलर और इनका प्रतिशत एक जैसे ही होते हैं: आपको इन्हें एकरूप में रखना होगा, ताकि ये सारे ब्राउज़र पर एक ही समान दिख सकें।
    • ये परसेंटेज ( 0% , 25% आदि), आपके एनिमेशन की पूरी लम्बाई ( 60s ) पर लागू होते हैं: जब कभी भी पेज लोड होता है, बैकग्राउंड भी 0% ( #33FFF3 ) कलर सेट के बीच में होगा जैसे ही एनिमेशन 60 सेकंड का 25% चल जाता है, बैकग्राउंड अपने आप ही #78281F पर पहुँच जाएगा और ऐसे ही आगे भी बढ़ता जाएगा
    • आप चाहें तो अपनी इच्छानुसार परिणाम पाने के लिए समय और कलर में कैसे भी बदलाव कर सकते हैं


संबंधित लेखों

कैसे
अपने सिम कार्ड से अपना मोबाइल नंबर पता करें
कैसे
उस व्यक्ति को कॉल करें जिसने आपका नंबर ब्लॉक कर दिया है (Call a Person That Has Blocked Your Number)
कैसे
इंस्टाग्राम पासवर्ड रीसेट करें (Reset Your Instagram Password)
कैसे
इंस्टाग्राम पर किसी लड़की से बात शुरू करें (Start a Conversation with a Girl on Instagram)
कैसे
ब्लॉक (block) किए हुये नंबर पर वापस कॉल करें
कैसे
Pirate Bay से डाउनलोड करें (Download from Pirate Bay)
WhatsApp टिप्स: फेक नंबर से व्हाट्सअप चलायें
कैसे
फोटो की मदद से किसी की खोज करें (Search and Find About Someone Using Image Easily)
कैसे
यूट्यूब से गाने डाउनलोड करें (Kaise YouTube se Gaane Download Kare)
कैसे
PC में हिंदी में टाइप करें (Type in Hindi on a PC)
कैसे
लड़कियों से ऑनलाइन बातें करें (Talk to Girls Online)
कैसे
एंड्राइड में सेफ मोड बंद करें
कैसे
HTML का इस्तेमाल करके एक वेब पेज तैयार करें (Create a Simple Web Page with HTML)
क्रोम पर एडल्ट कॉन्टेंट ब्लॉक करने के 4 आसान तरीके

रेफरेन्स

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ http://www.w3schools.com/cssref/pr_background-image.asp
  4. ↑ https://css-tricks.com/css3-gradients/
  5. ↑ http://www.w3schools.com/css/css3_gradients.asp
  6. ↑ https://codepen.io/metagrapher/pen/tgcLl
  7. ↑ http://www.w3schools.com/css/css3_animations.asp

विकीहाउ के बारे में

अन्य भाषाओं में
सभी लेखकों को यह पृष्ठ बनाने के लिए धन्यवाद दें जो ५४,००७ बार पढ़ा गया है।

यह लेख ने कैसे आपकी मदद की?