విషయము

• అడుగు పెట్టడానికి
• 4 యొక్క పద్ధతి 1: దృ background మైన నేపథ్య రంగును అమర్చుట
• 4 యొక్క విధానం 2: చిత్రాన్ని నేపథ్యంగా ఉపయోగించడం
• 4 యొక్క విధానం 3: ప్రవణత నేపథ్యాన్ని సృష్టించండి
• 4 యొక్క 4 వ పద్ధతి: కలర్ యానిమేషన్‌ను వాల్‌పేపర్‌గా సెట్ చేయండి

HTML లో వెబ్ పేజీ యొక్క నేపథ్యాన్ని సెట్ చేయడానికి, మీరు "బాడీ" మూలకానికి చిన్న మార్పు చేయాలి శైలి> / శైలి> టాగ్లు. దశలు మీ వాల్‌పేపర్‌ను ఎలా చూడాలనుకుంటున్నాయో దానిపై ఆధారపడి ఉంటుంది. మీ వెబ్‌సైట్ యొక్క నేపథ్యాన్ని దృ color మైన రంగు, చిత్రం, ప్రవణత లేదా రంగు యానిమేషన్‌గా ఎలా సెట్ చేయాలో తెలుసుకోండి.

అడుగు పెట్టడానికి

4 యొక్క పద్ధతి 1: దృ background మైన నేపథ్య రంగును అమర్చుట

1. మీకు ఇష్టమైన టెక్స్ట్ ఎడిటర్‌లో మీ HTML ఫైల్‌ను తెరవండి. HTML5 నాటికి, HTML లక్షణం bgcolor> కి మద్దతు లేదు. మీ పేజీలోని అన్ని ఇతర శైలి అంశాల మాదిరిగానే నేపథ్య రంగును CSS తో సెట్ చేయాలి.
2. జోడించండి శైలి> / శైలి> మీ పత్రాన్ని ట్యాగ్ చేస్తుంది. మీ పేజీ కోసం అన్ని శైలి డేటా (నేపథ్య రంగుతో సహా) ఈ ట్యాగ్‌లలో ఎన్కోడ్ చేయబడాలి. మీకు ఉందా? శైలి> ట్యాగ్‌లు ఇప్పటికే సూచించబడ్డాయి, అప్పుడు మీరు ఫైల్ యొక్క ఆ భాగానికి స్క్రోల్ చేయవచ్చు.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. లోపల "బాడీ" మూలకాన్ని టైప్ చేయండి శైలి> / శైలి> టాగ్లు. CSS లోని "బాడీ" మూలకానికి మీరు మార్చిన ఏదైనా మొత్తం పేజీని ప్రభావితం చేస్తుంది.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. "బాడీ" మూలకానికి "నేపథ్య-రంగు" ఆస్తిని జోడించండి. ఈ సందర్భంలో "రంగు" యొక్క ఒక స్పెల్లింగ్ మాత్రమే పని చేస్తుంది (కాదు: రంగు).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. కావలసిన నేపథ్య రంగును "నేపథ్య-రంగు" వెనుక ఉంచండి. మీరు ఇప్పుడు రంగు పేరును సూచించవచ్చు (ఆకుపచ్చ, నీలం, ed, మొదలైనవి), హెక్సాడెసిమల్ (హెక్స్) కోడ్‌లను ఉపయోగించండి (ఉదా. #000000 నలుపు కోసం, # ff0000 ఎరుపు మొదలైన వాటి కోసం) లేదా రంగు కోసం RGB విలువను టైప్ చేయడం ద్వారా (వంటివి rgb (255,255,0) పసుపు కోసం). హెక్సాడెక్సిమల్ కోడ్‌లతో ఒక ఉదాహరణ క్రింద ఉంది, నేపథ్యాన్ని వికీహో బ్యానర్‌తో సమానంగా చేస్తుంది:

   ! DOCTYPE html> html> తల> శైలి> శరీరం {background-color: # 93B874; } / style> / head> body> / body> / html>

   • తెలుపు: #FFFFFF
   • లేత గులాబీ: # FFCCE6
   • కాలిన సియన్నా: #993300
   • ఇండిగో - # 4B0082
   • వైలెట్ - # EE82EE
   • మీకు కావలసిన రంగు యొక్క హెక్స్ కోడ్‌లను కనుగొనడానికి w3schools.com HTML కలర్ పికర్‌ని చూడండి.
6. నేపథ్య రంగులను ఇతర అంశాలకు వర్తింపచేయడానికి "నేపథ్య-రంగు" ఉపయోగించండి. మీరు శరీర మూలకాన్ని సెట్ చేసినట్లే, ఇతర అంశాల నేపథ్యాలను సెట్ చేయడానికి మీరు నేపథ్య-రంగును ఉపయోగించవచ్చు. ఆ అంశాలను లోపల ఉంచండి శైలి> / శైలి> నేపథ్య-రంగు ఆస్తితో.

   ! DOCTYPE html> html> తల> శైలి> శరీరం {background-color: # 93B874; } h1 {నేపథ్య-రంగు: నారింజ; } p {నేపథ్య-రంగు: rgb (255,0,0); head / style> / head> body> h1> ఈ శీర్షికకు నారింజ నేపథ్యం లభిస్తుంది <h1> p> ఈ పేరాకు ఎరుపు నేపథ్యం లభిస్తుంది <p> / body> / html

4 యొక్క విధానం 2: చిత్రాన్ని నేపథ్యంగా ఉపయోగించడం

1. టెక్స్ట్ ఎడిటర్‌లో HTML ఫైల్‌ను తెరవండి. చాలా మంది తమ వెబ్‌సైట్ కోసం ఒక చిత్రాన్ని నేపథ్యంగా ఉపయోగించడానికి ఇష్టపడతారు. దీనితో మీరు ఒక నమూనా, ఆకృతి, ఫోటో లేదా ఏదైనా ఇతర చిత్రాన్ని నేపథ్యంగా సెట్ చేయవచ్చు. HTML5 నుండి, అన్ని నేపథ్యాలు తప్పనిసరిగా CSS (క్యాస్కేడింగ్ స్టైల్ షీట్స్) తో అమర్చాలి శైలి> / శైలి> టాగ్లు.
2. జోడించండి శైలి> / శైలి> మీ HTML ఫైల్‌కు ట్యాగ్ చేస్తుంది. మీ పేజీ కోసం అన్ని శైలి డేటా (నేపథ్య రంగుతో సహా) ఈ ట్యాగ్‌లలో సూచించబడాలి. మీరు ఇప్పటికే ఉన్నారా? శైలి> ట్యాగ్‌లు సెట్ చేయబడ్డాయి, ఫైల్ యొక్క ఆ భాగానికి స్క్రోల్ చేయండి.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. లోపల "బాడీ" మూలకాన్ని టైప్ చేయండి శైలి> / శైలి> టాగ్లు. CSS లోని "బాడీ" మూలకానికి మీరు మార్చిన ఏదైనా మొత్తం పేజీని ప్రభావితం చేస్తుంది.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. "బాడీ" మూలకానికి "నేపథ్య-చిత్రం" ఆస్తిని జోడించండి. ఈ ఆస్తిని జోడించేటప్పుడు మీకు మీ చిత్రం యొక్క ఫైల్ పేరు అవసరం. చిత్రం html ఫైల్ వలె అదే ఫోల్డర్‌లో సేవ్ చేయబడిందని నిర్ధారించుకోండి (లేదా ఫైల్‌కు పూర్తి మార్గాన్ని మీ వెబ్ సర్వర్‌కు జోడించండి).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); నేపథ్య-రంగు: # 93B874; } / style> / head> body> / body> / html>

   • కోడ్‌ను చేర్చడం మంచిది నేపథ్య రంగు ఒకవేళ నేపథ్య చిత్రం లోడ్ అవ్వదు.
5. బహుళ చిత్రాలను లేయర్ చేయండి. మీరు ఒకదానికొకటి పైన బహుళ చిత్రాలను పేర్చవచ్చు. మీరు పారదర్శక నేపథ్యాలతో చిత్రాలను కలిగి ఉంటే ఇది ఉపయోగపడుతుంది.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); నేపథ్య-రంగు: # 93B874; } / style> / head> body> / body> / html>

   • మొదటి చిత్రం పైన ఉంది. రెండవ చిత్రం మొదటి క్రింద ఉంది.

4 యొక్క విధానం 3: ప్రవణత నేపథ్యాన్ని సృష్టించండి

1. ప్రవణత నేపథ్యాన్ని సృష్టించడానికి CSS ని ఉపయోగించండి. మీరు దృ color మైన రంగు కంటే కొంచెం శైలీకృత దేనికోసం చూస్తున్నట్లయితే, కానీ రంగు యానిమేషన్ వలె బిజీగా లేకుంటే, ప్రవణత నేపథ్యాన్ని ప్రయత్నించండి. ప్రవణతలు ఇతర సమానత్వాలకు మారే రంగులు. మీ ప్రవణతను సృష్టించడానికి మరియు సర్దుబాటు చేయడానికి మీరు CSS ను ఉపయోగించవచ్చు. మీరు రంగు ప్రవణతను సృష్టించడం ప్రారంభించడానికి ముందు, మీరు CSS తో వెబ్ పేజీని ఫార్మాట్ చేసే ప్రాథమిక విషయాల గురించి తగినంత జ్ఞానం పొందాలి.
2. ప్రామాణిక వాక్యనిర్మాణాన్ని అర్థం చేసుకోండి. ప్రవణతను సృష్టించేటప్పుడు, మీకు రెండు సమాచారం అవసరం: ప్రారంభ స్థానం మరియు ప్రారంభ కోణం మరియు పరివర్తన సంభవించే రంగులు. మీరు అన్నింటినీ అతివ్యాప్తి చేసే బహుళ రంగులను ఎంచుకోవచ్చు మరియు మీరు ప్రవణత కోసం ఒక దిశ లేదా కోణాన్ని పేర్కొనవచ్చు.

   నేపథ్యం: సరళ-ప్రవణత (దిశ / కోణం, రంగు 1, రంగు 2, రంగు 3, మొదలైనవి);

3. నిలువు ప్రవణతను సృష్టించండి. మీరు దిశను సూచించకపోతే, రంగు పై నుండి క్రిందికి నడుస్తుంది. వేర్వేరు బ్రౌజర్‌లు ప్రవణత ఫంక్షన్ యొక్క విభిన్న సంస్కరణలను కలిగి ఉంటాయి, కాబట్టి మీరు కోడ్ యొక్క విభిన్న సంస్కరణలను జోడించాల్సి ఉంటుంది.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * ప్రవణత మొత్తం పేజీని * /} బాడీ {నేపథ్యంలో విస్తరించి ఉందని నిర్ధారించడానికి ఇది అవసరం: -వెబ్కిట్-లీనియర్-ప్రవణత (# 93B874, # C9DCB9); / * Chrome 10+, సఫారి 5.1+ * / నేపథ్యం: -o- లీనియర్-ప్రవణత (# 93B874, # C9DCB9); / * ఒపెరా 11.1+ * / నేపథ్యం: -మోజ్-లీనియర్-ప్రవణత (# 93B874, # C9DCB9); / * ఫైర్‌ఫాక్స్ 3.6+ * / నేపథ్యం: లీనియర్-ప్రవణత (# 93B874, # C9DCB9); / * డిఫాల్ట్ వాక్యనిర్మాణం (చివరిగా ఉండాలి) * / నేపథ్య-రంగు: # 93B874; / * ప్రవణత లోడ్ చేయకపోతే నేపథ్య రంగును సెట్ చేయడం మంచిది, * /} / style> / head> body> / body> / html>

4. దిశతో ప్రవణతను సృష్టించండి. ప్రవణతకు దిశను జోడించడం వలన రంగు మారే విధానాన్ని సర్దుబాటు చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. వేర్వేరు బ్రౌజర్‌లు దిశలను భిన్నంగా వివరిస్తాయని గమనించండి. అవన్నీ ఒకే రంగు ప్రవణతను చూపుతాయి.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } బాడీ {నేపథ్యం: -వెబ్కిట్-లీనియర్-ప్రవణత (ఎడమ, # 93B874, # C9DCB9); / * ఎడమ నుండి కుడికి * / నేపథ్యం: -o- లీనియర్-ప్రవణత (కుడి, # 93B874, # C9DCB9); / * కుడి వైపున ముగింపు * / నేపథ్యం: -మోజ్-లీనియర్-ప్రవణత (కుడి, # 93B874, # C9DCB9); / * కుడి వైపున ముగింపు * / నేపథ్యం: సరళ-ప్రవణత (కుడి నుండి, # 93B874, # C9DCB9); / * కుడి వైపుకు కదులుతుంది * / background-color: # 93B874; / * ప్రవణత లోడ్ చేయకపోతే నేపథ్య రంగును సెట్ చేయడం మంచిది, * /} / style> / head> body> / body> / html>

5. ప్రవణతను సర్దుబాటు చేయడానికి ఇతర లక్షణాలను ఉపయోగించండి. మీరు ప్రవణతలతో చాలా ఎక్కువ చేయవచ్చు.
   • ఉదాహరణకు, మీరు రెండు రంగులకు మించి ఉపయోగించలేరు, కానీ ప్రతి దాని వెనుక ఒక శాతాన్ని కూడా ఉంచవచ్చు. దీనితో ప్రతి రంగు విభాగానికి ఎంత స్థలం వస్తుందో మీరు సూచించవచ్చు.

     నేపథ్యం: లీనియర్-ప్రవణత (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • రంగులకు పారదర్శకతను జోడించండి. దీనితో మీరు రంగులను ఫేడ్ చేయవచ్చు. రంగు నుండి ఏమీ మారడానికి అదే రంగును ఉపయోగించండి. మీరు ఫంక్షన్‌ను ఇష్టపడతారు rgba () రంగును సూచించడానికి ఉపయోగించాలి. తుది విలువ పారదర్శకత స్థాయిని నిర్ణయిస్తుంది: 0 అపారదర్శక మరియు 1 పారదర్శకంగా.

     నేపథ్యం: సరళ ప్రవణత (కుడికి), rgba (147,184,116.0), rgba (147,184,116.1%);

4 యొక్క 4 వ పద్ధతి: కలర్ యానిమేషన్‌ను వాల్‌పేపర్‌గా సెట్ చేయండి

1. నావిగేట్ చేయండి శైలి> మీ HTML కోడ్‌లో. మీరు దృ background మైన నేపథ్య రంగును కనుగొంటే, రంగు నేపథ్యాలను మార్చడంలో ప్రయోగం చేయండి. HTML 5 నుండి, నేపథ్య రంగులను CSS (క్యాస్కేడింగ్ స్టైల్ షీట్స్) తో నిర్వచించాలి. మీరు CSS తో నేపథ్య రంగును ఎప్పుడూ సెట్ చేయకపోతే, ఈ పద్ధతిని ప్రయత్నించే ముందు దృ background మైన నేపథ్య రంగును సెట్ చేసే విభాగాన్ని చదవండి.
2. ఆస్తిని జోడించండి యానిమేషన్ "శరీర" మూలకానికి. ప్రతి బ్రౌజర్‌కు వేర్వేరు కోడ్ అవసరం కాబట్టి మీరు 2 వేర్వేరు లక్షణాలను జోడించాల్సి ఉంటుంది.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s అనంతం; యానిమేషన్: రంగు మార్పిడి 60 ల అనంతం; } / style> / head> body> / body> / html>

   • -వెబ్కిట్-యానిమేషన్ Chrome- ఆధారిత బ్రౌజర్‌లకు (Chrome, Opera, Safari) ఆస్తి అవసరం. యానిమేషన్ అన్ని ఇతర బ్రౌజర్‌లకు ప్రమాణం.
   • రంగు మార్పిడి ఈ ఉదాహరణలో యానిమేషన్ అంటారు.
   • 60 లు యానిమేషన్ / పరివర్తన యొక్క వ్యవధి (60 సెకన్లు). వెబ్‌కిట్ మరియు డిఫాల్ట్ సింటాక్స్ రెండింటికీ దీన్ని సెట్ చేయాలని నిర్ధారించుకోండి.
   • అనంతం యానిమేషన్ నిరవధికంగా పునరావృతం కావాలని సూచిస్తుంది. మీరు రంగులను లూప్ చేసి, చివరి రంగులో ఆపడానికి ఇష్టపడితే, మీరు ఈ భాగాన్ని వదిలివేయవచ్చు.
3. మీ యానిమేషన్‌కు రంగులు జోడించండి. ఇప్పుడు మీరు నేపథ్య రంగులను సెట్ చేయడానికి @keyframes నియమాన్ని ఉపయోగించబోతున్నారు, అలాగే ప్రతి రంగును పేజీలో ఎంతసేపు చూడవచ్చు. మళ్ళీ, మీరు వివిధ బ్రౌజర్‌ల కోసం బహుళ ఎన్‌కోడింగ్‌లను జోడించాల్సి ఉంటుంది.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s అనంతం; యానిమేషన్: రంగు మార్పిడి 60 ల అనంతం; we we -వెబ్‌కిట్-కీఫ్రేమ్‌ల రంగు మార్పిడి {0% {నేపథ్యం: # 33FFF3;} 25% {నేపథ్యం: # 78281F;} 50% {నేపథ్యం: # 117A65;} 75% {నేపథ్యం: # DC7633;} 100% {నేపథ్యం: # 9B59B6; 9B59B6;}} / style> / head> body> / body> / html>

   • రెండు పంక్తులు (we -వెబ్కిట్-కీఫ్రేమ్‌లు మరియు @keyframes నేపథ్య రంగులు మరియు శాతాలకు ఒకే విలువలు ఉంటాయి. ఇది అన్ని బ్రౌజర్‌లకు అనుభవం ఒకే విధంగా ఉండేలా ఉండాలి.
   • శాతాలు (0%, 25%, మొదలైనవి) యానిమేషన్ యొక్క మొత్తం వ్యవధిని సూచిస్తాయి (60 లు). పేజీ లోడ్ అయినప్పుడు, నేపథ్యానికి రంగు సెట్ చేయబడుతుంది 0% మరియు (# 33FFF3). యానిమేషన్ యొక్క 25% లేదా 60 సెకన్లు ఆడినప్పుడు, నేపథ్యం దీనికి మారుతుంది # 78281 ఎఫ్, మరియు మొదలైనవి.
   • మీరు వ్యవధి మరియు రంగులను కావలసిన విధంగా సర్దుబాటు చేయవచ్చు.