CSS నేపథ్యం vs నేపథ్య రంగు

HTML మూలకాలను స్టైల్ చేయడానికి CSS విభిన్న లక్షణాలను అందిస్తుంది. నేపథ్య చిత్రం మరియు రంగును జోడించడం మరియు HTML మూలకాల వెడల్పు మరియు ఎత్తును సెట్ చేయడం వంటి విభిన్న ప్రయోజనాల కోసం ఈ లక్షణాలు ఉపయోగించబడతాయి. ఈ లక్షణాలలో మార్జిన్, రంగు, వెడల్పు, ఎత్తు, నేపథ్యం, నేపథ్యం-రంగు మరియు మరెన్నో ఉన్నాయి. మరింత ప్రత్యేకంగా, HTML మూలకాల నేపథ్యాన్ని సెట్ చేయడానికి నేపథ్యం మరియు నేపథ్య-రంగు ఆస్తి ఉపయోగించబడుతుంది.

ఈ మాన్యువల్‌లో, నేపథ్యం మరియు నేపథ్య-రంగు లక్షణాల మధ్య వ్యత్యాసాన్ని మేము వివరంగా నేర్చుకుంటాము.

మొదలు పెడదాం!

CSS నేపథ్య ఆస్తి

ఏదైనా HTML మూలకం యొక్క నేపథ్యాన్ని సర్దుబాటు చేయడానికి, CSS ' నేపథ్య ”ఆస్తి వినియోగించబడుతుంది. ఇది మరో ఎనిమిది ప్రాపర్టీల షార్ట్‌హ్యాండ్ ప్రాపర్టీ అంటే మీరు వాటన్నింటినీ ఒకే లైన్‌లో ఉపయోగించవచ్చు. ఆ ఇతర లక్షణాలు:

నేపథ్య రంగు
నేపథ్య చిత్రం
నేపథ్య-స్థానం
నేపథ్య పరిమాణం
నేపథ్య-పునరావృతం
నేపథ్యం-మూలం
నేపథ్య-క్లిప్
నేపథ్య-అటాచ్మెంట్

వాక్యనిర్మాణం

నేపథ్య ఆస్తి యొక్క వాక్యనిర్మాణం ఇక్కడ ఉంది:

నేపథ్యం: రంగు చిత్రం స్థానం/పరిమాణం పునరావృత మూలం క్లిప్ జోడింపు

పైన పేర్కొన్న అన్ని లక్షణాల వివరణకు ఒక్కొక్కటిగా వెళ్దాం.

CSS నేపథ్య-రంగు ఆస్తి

'ని ఉపయోగించడం నేపథ్య రంగు ” ఆస్తి, మీరు నేపథ్య రంగును సెట్ చేయవచ్చు. HTML మూలకాల వెనుక రంగు కనిపిస్తుంది.

వాక్యనిర్మాణం

నేపథ్య-రంగు ఆస్తి యొక్క వాక్యనిర్మాణం:

నేపథ్య రంగు : రంగు

స్థానంలో ' రంగు ”, మీరు మూలకాల వెనుక కనిపించాలనుకుంటున్న నేపథ్యం యొక్క రంగును సెట్ చేయవచ్చు.

ఉదాహరణ

ముందుగా, HTML ఫైల్‌లో, మేము

ట్యాగ్‌ని ఉపయోగించి ఒక కంటైనర్‌ను సృష్టిస్తాము మరియు ఆపై శీర్షిక మరియు పేరాని జోడిస్తాము.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > మా వెబ్‌సైట్‌కి స్వాగతం < / p >

< / div >

CSSలో, మేము div యొక్క ఎత్తును ఇలా సర్దుబాటు చేస్తాము 100% 'ఇది మొత్తం పేజీలో మరియు టెక్స్ట్ యొక్క ఫాంట్ పరిమాణంలో కనిపించేలా చేయడానికి' xx-పెద్ద ”. ఆ తర్వాత, బ్యాక్‌గ్రౌండ్ కలర్‌ను ఇలా సెట్ చేయండి ఆక్వా ”.

CSS

div {

ఎత్తు : 100% ;

ఫాంట్ పరిమాణం : xx-పెద్ద ;

నేపథ్య రంగు : ఆక్వా ;

}

దిగువ అందించిన చిత్రంలో, నేపథ్య రంగు వర్తించబడిందని మీరు చూడవచ్చు:

CSS బ్యాక్‌గ్రౌండ్-ఇమేజ్ ప్రాపర్టీ

ది ' నేపథ్య చిత్రం ”ఒకటి లేదా అంతకంటే ఎక్కువ చిత్రాలను HTML మూలకాల నేపథ్యంగా సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. విభిన్న అంశాల కోసం విభిన్న నేపథ్య చిత్రాలను జోడించడానికి మీరు ఈ ప్రాపర్టీని ఉపయోగించుకోవచ్చు.

వాక్యనిర్మాణం

బ్యాక్‌గ్రౌండ్-ఇమేజ్ ప్రాపర్టీ యొక్క సింటాక్స్:

నేపథ్య చిత్రం: url()

ఇక్కడ, మీరు నేపథ్యంగా సెట్ చేయాలనుకుంటున్న చిత్రం యొక్క పాత్‌ను ఆర్గ్యుమెంట్‌గా ఇవ్వండి “ url() ”.

ఉదాహరణ

మునుపటి ఉదాహరణ యొక్క కొనసాగింపుగా, “లో నేపథ్య చిత్రాన్ని జోడించండి div ” తరగతి. మేము చిత్రం యొక్క urlని ఇలా జోడిస్తాము ' url(img.jpg) ”:

div {

...

నేపథ్య చిత్రం : url ( img.jpg ) ;

}

దిగువ అందించిన అవుట్‌పుట్ నేపథ్య చిత్రం విజయవంతంగా జోడించబడిందని సూచిస్తుంది:

చిత్రం పునరావృతమైందని గమనించండి. ఈ సమస్యను పరిష్కరించడానికి, తదుపరి ఆస్తిని తనిఖీ చేయండి.

CSS బ్యాక్‌గ్రౌండ్-రిపీట్ ప్రాపర్టీ

మీరు వెబ్ పేజీలో నేపథ్యంగా చిత్రాన్ని జోడించినప్పుడు, అది డిఫాల్ట్‌గా పునరావృతమవుతుంది. ఈ పునరావృతాన్ని నివారించడానికి మరియు మీ ఎంపిక ప్రకారం నమూనాను సెట్ చేయడానికి, ' నేపథ్య-పునరావృతం ”ఆస్తి వినియోగించబడుతుంది.

వాక్యనిర్మాణం

బ్యాక్‌గ్రౌండ్-రిపీట్ ప్రాపర్టీ యొక్క సింటాక్స్:

నేపథ్య-పునరావృతం : పునరావృతం | పునరావృతం-x | పునరావృతం-y | పునరావృతం కాదు

బ్యాక్‌గ్రౌండ్-రిపీట్ ప్రాపర్టీ యొక్క పేర్కొన్న విలువల వివరణ క్రింద ఇవ్వబడింది:

పునరావృతం: చిత్రాన్ని నిలువుగా మరియు అడ్డంగా రెండు దిశలలో పునరావృతం చేయడానికి ఇది ఉపయోగించబడుతుంది.
పునరావృతం-x: చిత్రం యొక్క పునరావృతాన్ని అడ్డంగా మాత్రమే సెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది.
పునరావృతం-y: ఇది చిత్రం యొక్క నిలువు పునరావృతాన్ని నిర్దేశిస్తుంది.
పునరావృతం కానిది: చిత్రం పునరావృతం కాకుండా ఉండటానికి ఇది ఉపయోగించబడుతుంది.

ఉదాహరణ

ఇక్కడ, మేము బ్యాక్‌గ్రౌండ్-రిపీట్ ప్రాపర్టీ విలువను ఇలా సెట్ చేస్తాము ' పునరావృతం కాదు ”:

div {

...

నేపథ్య-పునరావృతం : పునరావృతం కాదు ;

}

పైన అందించిన కోడ్ యొక్క ఫలితం క్రింద ఇవ్వబడింది. చిత్రం ఇకపై పునరావృతం కాదని మీరు చూడవచ్చు:

CSS నేపథ్య-స్థానం ఆస్తి

నేపథ్య చిత్రం యొక్క స్థానాన్ని సెట్ చేయడానికి, ' నేపథ్య-స్థానం ” ఆస్తి ఉపయోగించబడుతుంది. ఇది ఎడమ ఎగువ, ఎడమ మధ్య, ఎడమ దిగువ, కుడి ఎగువ, కుడి మధ్య మరియు మరెన్నో వంటి విభిన్న స్థానాల్లో చిత్రాన్ని సర్దుబాటు చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.

వాక్యనిర్మాణం

నేపథ్య-స్థాన ఆస్తి యొక్క వాక్యనిర్మాణం:

నేపథ్య-స్థానం : విలువ

స్థానంలో ' విలువ ”, మీరు చిత్రం యొక్క స్థానాన్ని పేర్కొనవచ్చు.

ఉదాహరణ

ఇక్కడ, మేము నేపథ్య-స్థానాన్ని ఇలా సెట్ చేస్తాము ' కేంద్రం ”:

div {

...

నేపథ్య-స్థానం : కేంద్రం ;

}

దిగువ అవుట్‌పుట్‌లో, చిత్రం పేజీ మధ్యలో కనిపిస్తుంది:

CSS నేపథ్య-పరిమాణ ఆస్తి

నేపథ్య చిత్రం యొక్క పరిమాణాన్ని సెట్ చేయడానికి, ' నేపథ్య పరిమాణం ” ఆస్తి ఉపయోగించబడుతుంది.

వాక్యనిర్మాణం

నేపథ్య పరిమాణం కింది వాక్యనిర్మాణాన్ని కలిగి ఉంది:

నేపథ్య పరిమాణం : పొడవు|కవర్

నేపథ్య-పరిమాణ ఆస్తి విలువల వివరణ క్రింది విధంగా ఉంది:

పొడవు: ఇది నేపథ్య చిత్రం యొక్క వెడల్పు మరియు ఎత్తును పరిష్కరించడానికి ఉపయోగించబడుతుంది.
కవర్: ఇది మొత్తం నేపథ్యంలో నేపథ్య చిత్రాన్ని సర్దుబాటు చేయడానికి ఉపయోగించబడుతుంది.

ఉదాహరణ

మేము నేపథ్య పరిమాణాన్ని ఇలా సెట్ చేస్తాము 100% 'ఎత్తు మరియు' 80% 'వెడల్పు:

div {

...

నేపథ్య పరిమాణం : 100% 80% ;

}

పేర్కొన్న కొలతల ఆధారంగా చిత్రం పరిమాణం మార్చబడిందని మీరు చూడవచ్చు:

CSS నేపథ్యం-మూలం ఆస్తి

ది ' నేపథ్యం-మూలం నేపథ్య చిత్రం యొక్క స్థాన ప్రాంతాన్ని సర్దుబాటు చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. చిత్రం డిఫాల్ట్‌గా ఎగువ-ఎడమ మూలలో సర్దుబాటు చేయబడింది.

వాక్యనిర్మాణం

నేపథ్య-మూలం ఆస్తి యొక్క వాక్యనిర్మాణం:

నేపథ్యం-మూలం : padding-box| సరిహద్దు పెట్టె | కంటెంట్ బాక్స్

నేపథ్య-మూలం ఆస్తి విలువలు క్రింద వివరించబడ్డాయి:

ప్యాడింగ్ బాక్స్: ఇది ప్యాడింగ్ అంచు ప్రకారం నేపథ్య చిత్రం యొక్క స్థానాన్ని సర్దుబాటు చేయడానికి ఉపయోగించే నేపథ్య-మూలం ఆస్తి యొక్క డిఫాల్ట్ విలువ.
సరిహద్దు పెట్టె: చిత్రం యొక్క సరిహద్దు పెట్టె ప్రకారం చిత్రాన్ని సెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది.
కంటెంట్ బాక్స్: చిత్రం యొక్క కంటెంట్‌కు అనుగుణంగా నేపథ్య చిత్రాన్ని సెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది.

గమనిక: బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ ప్రాపర్టీ విలువను ఇలా సెట్ చేస్తే బ్యాక్‌గ్రౌండ్-ఆరిజిన్ ప్రాపర్టీ పని చేయదు స్థిర ”.

ఉదాహరణ

మొదట, కంటైనర్ చుట్టూ సరిహద్దును సృష్టించండి. ఇక్కడ, మేము మునుపటి ఉదాహరణను కొనసాగిస్తాము మరియు పాడింగ్ విలువను 'గా సెట్ చేస్తాము 10px ”. ఆ తర్వాత, అంచు వెడల్పును ఇలా సర్దుబాటు చేయండి 15px ”, శైలి “ శిఖరం ', మరియు రంగు ' rgb(1, 68, 68) ”. చివరికి, మేము నేపథ్య మూలం ఆస్తి విలువను ఇలా కేటాయిస్తాము ' కంటెంట్ బాక్స్ ”:

div {

...

పాడింగ్ : 10px ;

సరిహద్దు : 15px శిఖరం rgb ( 1 , 68 , 68 ) ;

నేపథ్యం-మూలం : కంటెంట్ బాక్స్ ;

}

పైన అందించిన కోడ్ యొక్క ఫలితం క్రింద ఇవ్వబడింది. చిత్రం యొక్క స్థానం div యొక్క కంటెంట్ ప్రకారం సెట్ చేయబడిందని మీరు చూడవచ్చు:

CSS బ్యాక్‌గ్రౌండ్-క్లిప్ ప్రాపర్టీ

ది ' నేపథ్య-క్లిప్ ”ప్రాపర్టీ మూలకం యొక్క నేపథ్య రంగుపై పనిచేస్తుంది. మూలకం యొక్క పాడింగ్, దాని అంచు మరియు దాని కంటెంట్ వంటి ఎలిమెంట్‌కు మించి బ్యాక్‌గ్రౌండ్ కలర్ ఎంత దూరం విస్తరించిందో నియంత్రించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది.

వాక్యనిర్మాణం

బ్యాక్‌గ్రౌండ్-క్లిప్ ప్రాపర్టీ యొక్క సింటాక్స్:

నేపథ్యం-మూలం : సరిహద్దు పెట్టె | పాడింగ్ బాక్స్ | కంటెంట్ బాక్స్

నేపథ్య-మూలం ఆస్తి విలువలు క్రింద వివరించబడ్డాయి:

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

ఉదాహరణ

మేము మునుపటి ఉదాహరణను కొనసాగిస్తాము మరియు సరిహద్దు శైలి యొక్క విలువను ' చుక్కలున్నాయి ” బ్యాక్ గ్రౌండ్-క్లిప్ ప్రాపర్టీని అర్థం చేసుకోవడానికి. ఆ తర్వాత, మేము బ్యాక్‌గ్రౌండ్-క్లిప్ ప్రాపర్టీ విలువను ఇలా సెట్ చేస్తాము “ పాడింగ్ బాక్స్ ”:

div {

...

నేపథ్య-క్లిప్ : పాడింగ్ బాక్స్ ;

}

సరిహద్దు అంచు ముగిసినప్పుడు తెలుపు నేపథ్య రంగు చూపబడుతుందని అవుట్‌పుట్ సూచిస్తుంది:

CSS బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ ప్రాపర్టీ

ది ' నేపథ్య-అటాచ్మెంట్ ” పేజీని స్క్రోల్ చేస్తున్నప్పుడు ప్రవర్తన లేదా ఇమేజ్‌ని సర్దుబాటు చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. దీని ప్రవర్తన ఇతర అంశాలతో స్క్రోలింగ్‌ను సెట్ చేయవచ్చు లేదా స్థిరంగా ఉంచవచ్చు.

వాక్యనిర్మాణం

బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ ప్రాపర్టీ యొక్క సింటాక్స్:

నేపథ్య-అటాచ్మెంట్ : విలువ

మీరు బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ విలువను ఇలా సెట్ చేయవచ్చు ' స్థిర ” నేపథ్య చిత్రాన్ని సరిచేయడానికి లేదా “ స్క్రోల్ చేయండి ” చిత్రాన్ని పేజీతో స్క్రోల్ చేయడానికి అనుమతించడానికి.

గమనిక: డిఫాల్ట్‌గా, బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ ప్రాపర్టీ విలువ ఇలా సెట్ చేయబడింది “ స్క్రోల్ చేయండి ”.

మేము స్క్రోల్ చేసినప్పుడు జోడించిన నేపథ్య చిత్రం స్థిరంగా లేదని చూడవచ్చు. ఇప్పుడు ఈ సమస్యను పరిష్కరిద్దాం.

అలా చేయడానికి, మేము బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్ ప్రాపర్టీ విలువను ఇలా సెట్ చేసాము “ స్థిర ”:

div {

...

నేపథ్య-అటాచ్మెంట్ : స్థిర ;

}

చిత్రం పరిష్కరించబడిందని చూపే ఫలితం ఇక్కడ ఉంది:

ఇప్పుడు, నేపథ్యం మరియు నేపథ్య-రంగు లక్షణాల మధ్య పోలిక వైపు వెళ్ళండి.