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

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

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

CSS లక్షణాలలో నేపథ్య చిత్రం

చిత్రం యొక్క ప్రవర్తనలను మరియు స్థానాలను నియంత్రించడానికి అనేక లక్షణాలు ఉన్నాయి. ఈ లక్షణాలు:

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

మేము ఈ ప్రతి లక్షణాలతో పరిచయం పొందుతాము మరియు కొన్ని ఆసక్తికరమైన ప్రదర్శనతో వాటిని ఎప్పుడు మరియు ఎలా ఉపయోగించాలో చూస్తాము.

CSS లో నేపథ్య చిత్రం

ది నేపథ్య-చిత్రం పేరు సూచించిన ఆస్తి వెబ్ పేజీలోని ఒక మూలకం ద్వారా నేపథ్య చిత్రాన్ని సూచించడానికి మరియు సెట్ చేయడానికి ఉపయోగించబడుతుంది. అప్రమేయంగా నేపథ్య-చిత్రం మూలకం యొక్క ఎగువ-ఎడమ మూలలో ఉంచబడుతుంది.

వాక్యనిర్మాణం: background-image: url | none | లీనియర్-ప్రవణత | రేడియల్-ప్రవణత

శరీరం {background-image: url ('apple.jpg')}
url ఉపయోగించి నేపథ్యం
 

పారామితులను అర్థం చేసుకుందాం:

ఇన్ఫర్మేటికాలో పరివర్తన రకం

• url: ఈ పరామితికి ఇన్‌పుట్ ఏదైనా చిత్రానికి ఫైల్ మార్గాన్ని లేదా నేపథ్యంగా సెట్ చేయాల్సిన చిత్రానికి URL ని పేర్కొనడానికి అనుమతిస్తుంది. ఒకటి కంటే ఎక్కువ చిత్రాలను ప్రకటించడానికి, ఉర్ల్స్ కామా డీలిమిటర్‌తో వేరు చేయబడతాయి.

శరీరం {background-image: url ('apple.jpg')}

• ఏదీ లేదు: ఇది ఆస్తి యొక్క డిఫాల్ట్ విలువ మరియు దాని విలువ పేర్కొనబడితే నేపథ్య చిత్రం ఇవ్వబడదు.

శరీరం {నేపథ్యం: ఏదీ లేదు}

• సరళ-ప్రవణత (): నేపథ్య చిత్రం సరళ ప్రవణతకు సెట్ చేయబడింది. ఈ ఆస్తి కోసం కనీసం రెండు రంగులు పేర్కొనవలసి ఉంటుంది, అంటే పై నుండి క్రిందికి.

శరీరం {నేపథ్య-రంగు: # 001 నేపథ్య-చిత్రం: సరళ-ప్రవణత (తెలుపు 15%, పారదర్శక 16%), సరళ-ప్రవణత (తెలుపు 15%, పారదర్శక 16%) నేపథ్య-పరిమాణం: 60 పిక్స్ 60 పిక్స్ నేపథ్య-స్థానం: 0 0, 30px 30px}

• రేడియల్-ప్రవణత (): నేపథ్య చిత్రం రేడియల్ ప్రవణతకు సెట్ చేయబడింది. ఈ ఆస్తి కోసం కనీసం రెండు రంగులు పేర్కొనవలసి ఉంటుంది, అనగా మధ్య నుండి అంచుల వరకు.

శరీరం {నేపథ్య-రంగు: # 001 నేపథ్య-చిత్రం: రేడియల్-ప్రవణత (తెలుపు 15%, పారదర్శక 16%), రేడియల్-ప్రవణత (తెలుపు 15%, పారదర్శక 16%) నేపథ్య పరిమాణం: 60 పిక్స్ 60 పిక్స్ నేపథ్య-స్థానం: 0 0, 30px 30px}

• పునరావృత-సరళ-ప్రవణత (): ఇది సరళ ప్రవణతను పునరావృతం చేస్తుంది. లీనియర్ ప్రవణతలో పునరావృత-లీనియర్-ప్రవణత కోసం మనం పైన చూసిన అదే ఉదాహరణను ఉపయోగిద్దాం మరియు వ్యత్యాసాన్ని చూద్దాం.

శరీరం {నేపథ్య-రంగు: # 001 నేపథ్య-చిత్రం: పునరావృత-సరళ-ప్రవణత (తెలుపు 15%, పారదర్శక 16%), పునరావృత-సరళ-ప్రవణత (తెలుపు 15%, పారదర్శక 16%) నేపథ్య-పరిమాణం: 60px 60px నేపథ్య-స్థానం : 0 0, 30px 30px}

• పునరావృత-రేడియల్-ప్రవణత (): ఇది రేడియల్ ప్రవణతను పునరావృతం చేస్తుంది .మేము పైన ఉపయోగించిన అదే ఉదాహరణను రేడియల్ ప్రవణతలో అన్వేషించండి.

శరీరం {నేపథ్య-రంగు: # 001 నేపథ్య-చిత్రం: పునరావృత-రేడియల్-ప్రవణత (తెలుపు 15%, పారదర్శక 16%), పునరావృత-రేడియల్-ప్రవణత (తెలుపు 15%, పారదర్శక 16%) నేపథ్య-పరిమాణం: 60px 60px నేపథ్య-స్థానం : 0 0, 30px 30px}

ఫాల్‌బ్యాక్ నేపధ్యం

ఫాల్‌బ్యాక్ ఎంపికగా నేపథ్య రంగును జోడించడం ప్రొఫెషనల్ చిట్కాగా ఎల్లప్పుడూ మంచిది. నేపథ్య చిత్రాలు లోడ్ చేయనప్పుడు లేదా అభివృద్ధి చెందుతున్నప్పుడు మేము సెట్ చేసిన ప్రవణత నేపథ్యం కొన్ని పాత బ్రౌజర్‌లకు మద్దతు ఇవ్వనప్పుడు ఇది రక్షించటానికి వస్తుంది.

ఇది వినియోగదారు అనుభవాన్ని పాడు చేయదు మరియు ఇలా ప్రకటించవచ్చు:

శరీరం {నేపథ్యం: url (apple_lost.jpg) పింక్}

బహుళ నేపథ్యం

బహుళ నేపథ్య చిత్రాలను సెట్ చేయడానికి మాకు ఒక ఎంపిక ఉంది మరియు ఇది ముందుభాగం మరియు నేపథ్య చిత్రం వంటి చాలా సందర్భాలలో అవసరం. చిత్రం యొక్క క్రమం ఇక్కడ ముఖ్యమైనది, ముందు భాగంలో ఉండవలసిన చిత్రం మొదట ప్రకటించబడుతుంది మరియు చివరిగా వెనుక భాగంలో ఉండవలసిన చిత్రం తరువాత ప్రకటించబడుతుంది.

బహుళ నేపథ్య చిత్రాలకు ఉదాహరణ క్రింద ఉంది:

శరీరం {background-image: url ('small-heart.jpg'), url ('background.jpg')}

నేపథ్యం పునరావృతం

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

సాధ్యమయ్యే విలువలు:

• పునరావృతం- చిత్రం అడ్డంగా మరియు నిలువుగా పునరావృతమవుతుంది
• నో-రిపీట్ - చిత్రం పునరావృతం కాదు
• రిపీట్- x - చిత్రం అడ్డంగా పునరావృతమవుతుంది
• రిపీట్-వై - చిత్రం నిలువుగా పునరావృతమవుతుంది
• space- మధ్య ఖాళీలు లేదా అంతరాలతో చిత్రం పునరావృతమవుతుంది.
• రౌండ్ - చిత్రం వాటి మధ్య ఎటువంటి ఖాళీలు లేకుండా నింపడానికి పునరావృతమవుతుంది.

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

నేపథ్య-పునరావృతం: రిపీట్ | రిపీట్-ఎక్స్ | రిపీట్-వై | నో రిపీట్ | స్పేస్ | రౌండ్

body {background-image: url ('heart.png'), url ('background.png') నేపథ్య-పునరావృతం: పునరావృతం- y, పునరావృతం- x నేపథ్య-రంగు: #ffffff}

నేపథ్య జోడింపు

ది నేపథ్య-అటాచ్మెంట్ కంటెంట్ స్క్రోల్ చేయబడినందున చిత్రం స్క్రోల్ చేయాలా వద్దా అని చెప్పడానికి నేపథ్య-చిత్రంతో పాటు ఆస్తి ఉపయోగించబడుతుంది. ఇది నేపథ్య చిత్రం పరిష్కరించబడాలని సూచిస్తుంది లేదా బ్రౌజర్ విండో వీక్షణకు సంబంధించి పత్రంతో పాటు స్క్రోల్ చేయాలి. డిఫాల్ట్ విలువ స్క్రోల్ చేయడం.

సాధ్యమయ్యే విలువలు:

• స్క్రోల్ - చిత్రం పేజీతో పాటు స్క్రోల్ చేస్తుంది.
• స్థిర - చిత్రం పేజీతో పాటు స్క్రోల్ చేయదు

నేపథ్య-అటాచ్మెంట్ కోసం CSS సింటాక్స్:

నేపథ్య-అటాచ్మెంట్: స్క్రోల్ | పరిష్కరించబడింది

బాడీ {background-image: url ('heart.png'), url ('background.png') నేపథ్య-పునరావృతం: స్థలం, రౌండ్}

ప్రోగ్రామ్ జావాను ఎలా ముగించాలి

నేపథ్య స్థానం

ది నేపథ్య స్థానం నేపథ్య చిత్రం యొక్క స్థానం లేదా స్థానాన్ని సూచించడానికి ఆస్తి ఉపయోగించబడుతుంది. సాధ్యమయ్యే విలువలు:

• టాప్
• కుడి
• దిగువ
• ఎడమ
• కేంద్రం
• ఈ విలువల కలయిక (ఉదా., ఎడమ ఎగువ)

నేపథ్య-స్థానం కోసం CSS వాక్యనిర్మాణం:

నేపథ్య స్థానం: ఎగువ | కుడి | ఎడమ | దిగువ | మధ్య

శరీరం {background-image: url ('heart.png') నేపథ్య-పునరావృతం: పునరావృతం చేయని నేపథ్య-అటాచ్మెంట్: స్క్రోల్}

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

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

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

• దానంతట అదే
• చిత్రం యొక్క పొడవు- ఎత్తు మరియు వెడల్పు ఉదా. 20px 40px.
• ఒక శాతం- ఎత్తు మరియు చిత్రం యొక్క వెడల్పు శాతంగా w.r.t పేరెంట్ ఎలిమెంట్ ఉదా. 50% 50%.
• సెంటర్- చిత్రాన్ని మధ్యలో సమలేఖనం చేయండి
• కవర్, నేపథ్య ప్రాంతం ద్వారా పూర్తిగా కవర్ చేయడానికి చిత్రాన్ని స్కేలింగ్ చేస్తుంది.
• కలిగి, చిత్రం దాని అసలు ఎత్తు మరియు వెడల్పు వరకు సరిపోయేలా స్కేలింగ్ చేస్తుంది.

నేపథ్య-స్థానం కోసం CSS వాక్యనిర్మాణం:

నేపథ్య పరిమాణం: విలువ

బాడీ {నేపథ్య-చిత్రం: url ('heart.png'), url ('background.png') నేపథ్య-పునరావృతం: నో-రిపీట్, రిపీట్ బ్యాక్ గ్రౌండ్-సైజ్: 400px 150px, కవర్}

బాడీ {నేపథ్య-చిత్రం: url ('heart.png'), url ('background.png') నేపథ్య-పునరావృతం: పునరావృతం కాదు, నేపథ్య-పరిమాణాన్ని పునరావృతం చేయండి: కలిగి, 400px 150px}

జావాలో సింగిల్టన్ తరగతిని సృష్టించే మార్గాలు

నేపథ్య రంగు

CSS లోని అన్ని లక్షణాలలో ఇది సరళమైనది వర్తిస్తుంది. ఇది పేజీ యొక్క నేపథ్యానికి దృ colors మైన రంగులను వర్తిస్తుంది. ఈ ఆస్తి యొక్క విలువను రంగులు (ఉదా. ఎరుపు, నీలం, మొదలైనవి), హెక్స్ విలువ మరియు RGB విలువలలో పేర్కొనవచ్చు.

నేపథ్య-రంగు కోసం CSS వాక్యనిర్మాణం:

నేపథ్య రంగు: విలువ

శరీరం {background-image: url (small-heart.jpg) background-color: # 22a8e3}

ఇది మేము నేపథ్యంతో ఉపయోగించగల అన్ని లక్షణాలను ముగించింది. మేము మా ప్రదర్శనలో చూసినట్లుగా లక్షణాల యొక్క విభిన్న కలయికలను ఎల్లప్పుడూ ప్రయత్నించవచ్చు.

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

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

మాకు ప్రశ్న ఉందా? దయచేసి 'CSS లోని నేపథ్య చిత్రం' బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.