CSS తో నేపథ్య రంగును ఎలా మార్చాలి

ఏ వర్ధమాన ఫ్రంట్-ఎండ్ డెవలపర్ కెరీర్‌లో అత్యంత ఉత్తేజకరమైన క్షణాలలో ఒకటి వెబ్ పేజీ యొక్క నేపథ్య రంగును ఎలా మార్చాలో నేర్చుకోవడం.

HTML తో పని చేయడం చాలా గొప్పది, కానీ CSS యొక్క కొన్ని పంక్తులతో మీరు మీ పేజీలను మరియు మీ ప్రోగ్రామింగ్ ప్రయాణం జీవితానికి వికసించేలా చేయవచ్చు.

ఈ గైడ్ CSS తో నేపథ్య రంగును ఎలా మార్చాలో మీరు తెలుసుకోవలసిన ప్రతిదాన్ని కవర్ చేస్తుంది.

సెటప్ పొందండి

కొద్దిగా ప్రాథమిక పనిని చేద్దాము.

పంపినవారి ద్వారా మీరు gmail ని క్రమబద్ధీకరించగలరా

గమనిక : నేను ఉపయోగించమని సిఫార్సు చేస్తున్నాను విజువల్ స్టూడియో కోడ్ తో లైవ్ సర్వర్ పొడిగింపు మీరు HTML మరియు CSS ని అప్‌డేట్ చేస్తున్నప్పుడు నిజ సమయంలో మార్పులను వీక్షించడానికి.

మీ ప్రాజెక్ట్ ఫైల్స్ కోసం ఫోల్డర్‌ను సృష్టించండి.
ఒక సృష్టించు index.html మీ HTML ని ఉంచడానికి ఫైల్. మీరు బాయిలర్‌ప్లేట్ కోడ్‌ని ఉపయోగించవచ్చు లేదా కొన్నింటిని సెటప్ చేయవచ్చు , , మరియు టాగ్లు.
A ని సృష్టించండి styles.css మీ CSS కోసం ఫైల్.
ఉంచడం ద్వారా మీ CSS ఫైల్‌ను HTML తో లింక్ చేయండి లోపల టాగ్లు.

ఇప్పుడు మీరు CSS ని సవరించడం ప్రారంభించడానికి సిద్ధంగా ఉన్నారు.

సంబంధిత: బాయిలర్‌ప్లేట్ వెబ్‌సైట్‌ను ఎలా సృష్టించాలి

CSS తో నేపథ్య రంగును ఎలా మార్చాలి

నేపథ్య రంగును మార్చడానికి సులభమైన మార్గం శరీరం ట్యాగ్. అప్పుడు, సవరించండి నేపథ్య రంగు ఆస్తి. గూగుల్ కలర్ పిక్కర్ బ్రౌజర్ ఎక్స్‌టెన్షన్ కోసం శోధించడం మరియు ఉపయోగించడం ద్వారా మీరు రంగు కోడ్‌లను కనుగొనవచ్చు

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

ఈ కోడ్ నేపథ్యాన్ని చక్కని లేత నీలం రంగులోకి మారుస్తుంది.

ది నేపథ్య రంగు ఆస్తి ఆరు వేర్వేరు రూపాల్లో రంగులను అంగీకరిస్తుంది:

పేరు : లైట్‌స్కీ బ్లూ; (దగ్గరి అంచనా కోసం)
హెక్స్ కోడ్ : # bfd6ff;
rgb : rgb (191, 214, 255);
rgba : rgba (191, 214, 255, 1); ఎక్కడ కు ఆల్ఫా (అస్పష్టత)
HSL : hsl (218 °, 100%, 87%);
HSLA : hsla (218 °, 100%, 87%, 1); ఎక్కడ కు ఆల్ఫా (అస్పష్టత)

షార్ట్ హ్యాండ్ ఉపయోగించండి నేపథ్య స్థానంలో ఆస్తి నేపథ్య రంగు అదనపు కోడ్‌ను కత్తిరించడానికి. మీరు ఈ పద్ధతిని ఉపయోగించి ఏదైనా HTML మూలకం యొక్క నేపథ్య రంగును మార్చవచ్చు.

A ని సృష్టించండి మూలకం మరియు దానికి ఒక తరగతి ఇవ్వండి -ఈ సందర్భంలో, తరగతి ప్యానెల్ . దాన్ని సెట్ చేయండి ఎత్తు మరియు వెడల్పు CSS లోని లక్షణాలు. CSS లోని మూలకాన్ని ఎంచుకోండి మరియు దూరంగా రంగు వేయండి.

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 లో నేపథ్య చిత్రాన్ని ఎలా సెట్ చేయాలి

గమనిక : చాలా నిల్వ స్థలాన్ని ఆక్రమిస్తున్న పెద్ద నేపథ్య చిత్రాలను చేర్చడంలో జాగ్రత్త వహించండి. మొబైల్‌లో లోడ్ చేయడానికి ఇవి చాలా కష్టంగా ఉంటాయి, ఇక్కడ యూజర్‌లు పేజీలో ఉండడానికి మీకు రెండు సెకన్ల సమయం ఉంటుంది.

CSS బాక్స్-నీడతో మీ CSS గేమ్‌ను అప్ చేయండి

మీ లాంటి డెవలపర్ కోసం, బ్యాక్‌గ్రౌండ్-కలర్ మరియు బ్యాక్‌గ్రౌండ్-ఇమేజ్ ప్రాపర్టీస్ పాత వార్తలు. అదృష్టవశాత్తూ, నేర్చుకోవడానికి ఎల్లప్పుడూ కొత్తదనం ఉంటుంది.

మీ బాక్స్‌లకు CSS బాక్స్-షాడోతో బూస్ట్ ఇవ్వడానికి ప్రయత్నించండి. మీ HTML అంశాలు ఎన్నడూ మెరుగ్గా కనిపించలేదు!

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ CSS బాక్స్-షాడో ఎలా ఉపయోగించాలి: 13 ఉపాయాలు మరియు ఉదాహరణలు

బ్లాండ్ బాక్స్‌లు బోరింగ్‌గా కనిపిస్తాయి. CSS బాక్స్-షాడో ప్రభావంతో వాటిని పెంచుకోండి!

తదుపరి చదవండి సంబంధిత అంశాలు

ప్రోగ్రామింగ్
వెబ్ అభివృద్ధి
వెబ్ డిజైన్
CSS

రచయిత గురుంచి మార్కస్ మేర్స్ III(26 కథనాలు ప్రచురించబడ్డాయి)

మార్కస్ MUO లో జీవితకాల సాంకేతిక iత్సాహికుడు మరియు రైటర్ ఎడిటర్. అతను ట్రెండింగ్ టెక్, గాడ్జెట్‌లు, యాప్‌లు మరియు సాఫ్ట్‌వేర్‌లను కవర్ చేస్తూ 2020 లో తన ఫ్రీలాన్స్ రైటింగ్ కెరీర్‌ను ప్రారంభించాడు. అతను ఫ్రంట్ ఎండ్ వెబ్ డెవలప్‌మెంట్‌పై దృష్టి పెట్టి కాలేజీలో కంప్యూటర్ సైన్స్ చదివాడు.

మార్కస్ మేర్స్ III నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి