CSS के साथ बैकग्राउंड का रंग कैसे बदलें

किसी भी नवोदित फ्रंट-एंड डेवलपर के करियर में सबसे रोमांचक क्षणों में से एक यह सीख रहा है कि वेब पेज की पृष्ठभूमि का रंग कैसे बदला जाए।

एचटीएमएल के साथ काम करना बहुत अच्छा है और सभी, लेकिन सीएसएस की कुछ पंक्तियों के साथ आप अपने पेज और अपनी प्रोग्रामिंग यात्रा को जीवंत बना सकते हैं।

इस गाइड में सीएसएस के साथ पृष्ठभूमि का रंग बदलने के तरीके के बारे में जानने के लिए आवश्यक सभी चीजें शामिल होंगी।

सेट अप करें

आइए थोड़ा प्रारंभिक कार्य करें।

आप एक्सेल में दो कॉलम कैसे जोड़ते हैं?

ध्यान दें : मैं उपयोग करने की सलाह देता हूं विजुअल स्टूडियो कोड उसके साथ लाइव सर्वर एक्सटेंशन वास्तविक समय में परिवर्तन देखने के लिए जब आप HTML और CSS को अपडेट करते हैं।

अपने प्रोजेक्ट की फाइलों के लिए एक फोल्डर बनाएं।
बनाओ index.html अपने एचटीएमएल को रखने के लिए फाइल करें। आप बॉयलरप्लेट कोड का उपयोग कर सकते हैं, या बस कुछ सेट कर सकते हैं , , तथा टैग।
बनाओ शैलियाँ.सीएसएस अपने सीएसएस के लिए फ़ाइल।
अपनी CSS फ़ाइल को HTML के साथ रखकर लिंक करें के अंदर टैग।

अब आप CSS का संपादन शुरू करने के लिए तैयार हैं।

सम्बंधित: बॉयलरप्लेट वेबसाइट कैसे बनाएं

CSS के साथ बैकग्राउंड का रंग कैसे बदलें

पृष्ठभूमि का रंग बदलने का सबसे आसान तरीका है को लक्षित करना तन उपनाम। फिर, संपादित करें पीछे का रंग संपत्ति। आप Google कलर पिकर ब्राउज़र एक्सटेंशन को खोज कर और उसका उपयोग करके रंग कोड पा सकते हैं

body {  
 background-color: rgb(191, 214, 255);  
}

यह कोड पृष्ठभूमि को एक अच्छे हल्के नीले रंग में बदल देता है।

NS पीछे का रंग संपत्ति छह अलग-अलग रूपों में रंगों को स्वीकार करती है:

नाम : हल्का नीला; (निकट सन्निकटन के लिए)
हेक्स कोड : # बीएफडी6एफएफ;
आरजीबी : आरजीबी (191, 214, 255);
आरजीबीए : आरजीबीए (191, 214, 255, 1); कहां प्रति अल्फा है (अस्पष्टता)
एचएसएल : एचएसएल (218 डिग्री, 100%, 87%);
एचएसएलए : एचएसएलए (218 डिग्री, 100%, 87%, 1); कहां प्रति अल्फा है (अस्पष्टता)

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

बनाओ तत्व और इसे एक वर्ग दें- इस मामले में, वर्ग है पैनल . इसे सेट करें ऊंचाई तथा चौड़ाई सीएसएस में गुण। सीएसएस में तत्व का चयन करें और दूर रंग दें।

body {  
 background-color: rgb(191, 214, 255);  
}  
.container{  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 height: 90vh;  
}  
.panel {  
 background: rgb(255, 148, 148);  
 height: 10rem;  
 width: 30%;  
}  
.muo-text {  
 font-size: 3em;  
 font-weight: bolder;  
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
 position: absolute;  
}

यहाँ आप देख सकते हैं तन पृष्ठभूमि संपत्ति को स्वतंत्र रूप से स्टाइल किया गया है पैनल पृष्ठभूमि संपत्ति।

बैकग्राउंड प्रॉपर्टी भी ग्रेडिएंट स्वीकार करती है:

body {  
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);  
}

CSS में बैकग्राउंड इमेज कैसे बदलें

क्या होगा यदि आप चाहते हैं कि पृष्ठभूमि एक ठोस रंग या ढाल के बजाय एक छवि हो? आशुलिपि पृष्ठभूमि संपत्ति एक परिचित दोस्त है।

सुनिश्चित करें कि छवि उसी फ़ोल्डर में है जिसमें आपकी HTML और CSS फ़ाइलें हैं। अन्यथा आपको केवल नाम के बजाय कोष्ठक के अंदर फ़ाइल पथ का उपयोग करना होगा:

body {  
 background: url(leaves-and-trees.jpg)  
}

वाह! ऐसा लगता है कि छवि बहुत अधिक ज़ूम इन है। आप इसे ठीक कर सकते हैं पृष्ठभूमि-आकार संपत्ति।

body {  
 background: url(leaves-and-trees.jpg);  
 background-size: cover;  
}

आशुलिपि का उपयोग करने के लिए पृष्ठभूमि संपत्ति के साथ संयोजन के रूप में पृष्ठभूमि-आकार संपत्ति आवरण , आपको यह भी निर्दिष्ट करना होगा पृष्ठभूमि स्थिति गुण और बैकस्लैश के साथ मानों को अलग करें (भले ही वे डिफ़ॉल्ट स्थितीय मान हों जैसे कि बाएं से बाएं ।)

body {  
 background: url(leaves-and-trees.jpg) top left / cover;  
}

तुम वहाँ जाओ! सीएसएस की एक पंक्ति में एक उचित आकार की पृष्ठभूमि छवि।

अधिक पढ़ें: CSS में बैकग्राउंड इमेज कैसे सेट करें

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

सीएसएस बॉक्स-छाया के साथ अपने सीएसएस गेम को ऊपर उठाएं

अपने जैसे डेवलपर के लिए, पृष्ठभूमि-रंग और पृष्ठभूमि-छवि गुण पुरानी खबरें हैं। सौभाग्य से, सीखने के लिए हमेशा कुछ नया होता है।

CSS बॉक्स-छाया के साथ अपने बॉक्स को बढ़ावा देने का प्रयास करें। आपके HTML तत्व कभी बेहतर नहीं दिखे!

साझा करना साझा करना कलरव ईमेल CSS बॉक्स-शैडो का उपयोग कैसे करें: 13 ट्रिक्स और उदाहरण

ब्लैंड बॉक्स उबाऊ लगते हैं। CSS बॉक्स-छाया प्रभाव के साथ उन्हें सजाना!

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
वेब विकास
वेब डिजाइन
सीएसएस

लेखक के बारे में मार्कस मियर्स III(26 लेख प्रकाशित)

मार्कस एक आजीवन प्रौद्योगिकी उत्साही और MUO में लेखक संपादक हैं। उन्होंने ट्रेंडिंग टेक, गैजेट्स, ऐप्स और सॉफ्टवेयर को कवर करते हुए 2020 में अपने फ्रीलांस राइटिंग करियर की शुरुआत की। उन्होंने फ्रंट-एंड वेब डेवलपमेंट पर ध्यान देने के साथ कॉलेज में कंप्यूटर साइंस का अध्ययन किया।

मार्कस मिअर्स III . से अधिक

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें