ది ' చిత్రం స్ప్రిట్స్ ” అనేది బహుళ సింగిల్ ఇమేజ్‌లను కలిగి ఉండే ఒక పెద్ద ఇమేజ్‌ని సృష్టించే టెక్నిక్. మరియు డిజైన్ అవసరాలకు సంబంధించి పెద్ద చిత్రం యొక్క ఏదైనా భాగాన్ని ప్రదర్శించవచ్చు. ఇది డెవలపర్‌లకు దృశ్యమానంగా ఆకట్టుకునే అంశాలను సజావుగా నిర్మించడంలో సహాయపడుతుంది. చిహ్నాలు, బటన్‌లు మరియు ఇతర గ్రాఫికల్ ఎలిమెంట్‌ల కోసం ఇమేజ్ స్ప్రిట్‌లను ఉపయోగించవచ్చు. ఈ కథనం CSSలో ఇమేజ్ స్ప్రిట్‌లను ఉపయోగించే దశల వారీ విధానాన్ని ప్రదర్శిస్తుంది.
I ఎలా ఉపయోగించాలి CSS లో mage Sprites?
CSSలో, డెవలపర్‌లు వెబ్‌పేజీ లోడ్ అయ్యే సమయాన్ని తగ్గించడానికి/తగ్గించడానికి ఇమేజ్ స్ప్రిట్‌లను ఉపయోగిస్తారు. ఇది HTTP అభ్యర్థనలను తగ్గించడంలో సహాయపడుతుంది, వేగంగా లోడ్ అవుతుందని నిర్ధారిస్తుంది మరియు వినియోగదారు అనుభవ కారకాన్ని మెరుగుపరుస్తుంది. ఉదాహరణకు, దిగువ ఉదాహరణను సందర్శించండి:
ఉదాహరణ: జాబితా అంశంలో ఇమేజ్ స్ప్రైట్‌ని ఉపయోగించడం
ఈ ఉదాహరణలో, ఆర్డర్ చేయబడిన జాబితా సృష్టించబడుతుంది మరియు ప్రతి జాబితా అంశంలో, స్ప్రైట్ చిత్రం యొక్క భాగం స్క్రీన్‌పై ప్రదర్శించబడుతుంది.
అవసరం:
ఇమేజ్ స్ప్రైట్ నుండి నిర్దిష్ట ఇమేజ్‌ని పొందడానికి, ఉపయోగించబడుతున్న ఇమేజ్ స్ప్రైట్ యొక్క కొలతలు చాలా ముఖ్యమైనవి. ఉదాహరణకు, '' కోణాన్ని కలిగి ఉన్న చిత్రం 937×156 ” క్రింద చూపబడింది:
పైన ప్రదర్శించబడిన చిత్రంలో కొంత భాగాన్ని ప్రదర్శించడానికి క్రింది దశలను అనుసరించండి:
దశ 1: జాబితా అంశాల సృష్టి
దిగువ కోడ్ స్నిప్పెట్‌లో చూసినట్లుగా, క్రమం చేయని జాబితా వెబ్‌పేజీలో రూపొందించబడింది:
< ఉల్ >ఖాళీ: < అని id = 'ఖాళీ' > అని >
సగం: < అని id = 'సగం' > అని >
పూర్తి: < అని id = 'పూర్తి' > అని >
ఉల్ >
పై కోడ్ స్నిప్పెట్ యొక్క వివరణ:
-
- మొదట, 'ని ఉపయోగించండి
- తరువాత, ' యొక్క idలను కేటాయించండి ఖాళీ ',' సగం 'మరియు' పూర్తి ” మూడు జాబితా అంశాల కోసం. ఇవి పెద్ద ఇమేజ్‌లో కొంత భాగాన్ని ప్రదర్శించడానికి తర్వాత ఉపయోగించబడతాయి.
- మొదట, 'ని ఉపయోగించండి
దశ 2: మొదటి చిత్రాన్ని ప్రదర్శిస్తోంది
ఇమేజ్ స్ప్రైట్‌లోని మొదటి చిత్రం అయిన వెబ్ పేజీలో ఖాళీ హృదయాన్ని ప్రదర్శించడానికి. ఉపయోగించడానికి ' ఖాళీ ” id మరియు క్రింది కోడ్‌ను చొప్పించండి:
#ఖాళీ {వెడల్పు: 157px;
ఎత్తు: 150px;
నేపథ్యం: url ( .. / స్ప్రైట్.jpg ) 0 0 ;
}
పై కోడ్‌ల లైన్‌లో:
-
- మొదట, 'ని సెట్ చేయండి వెడల్పు 'మరియు' ఎత్తు ” వెబ్ పేజీలో డెవలపర్ ప్రదర్శించాలనుకుంటున్న చిత్రం.
- ఈ లక్షణాలు '' విలువలకు కేటాయించబడ్డాయి 157px 'మరియు' 150px ” పైన అందించిన ఉదాహరణ ప్రకారం, కానీ అవి వేర్వేరు కొలతలు కలిగిన చిత్రాలకు సంబంధించి మారవచ్చు.
- తరువాత, '' యొక్క మార్గాన్ని అందించండి స్ప్రైట్ 'చిత్రం నుండి' నేపథ్య ”ఆస్తి. ఇప్పుడు, 'దిక్కును సెట్ చేయండి 0 'మరియు' 0 ” మరియు ఇది ఇమేజ్ స్ప్రైట్ యొక్క మొదటి భాగాన్ని ప్రదర్శిస్తుంది.
ఎగువ కోడ్ లైన్ అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
చిత్రం స్ప్రైట్ నుండి మొదటి చిత్రం వెబ్‌పేజీలో ప్రదర్శించబడుతుందని పై స్నాప్‌షాట్ చూపిస్తుంది.
దశ 3: మధ్య మరియు చివరి చిత్రాన్ని ప్రదర్శిస్తోంది
చిత్రం స్ప్రైట్ నుండి మధ్య మరియు చివరి చిత్రం భాగాన్ని ప్రదర్శించడానికి, క్రింది CSS లక్షణాలను చొప్పించండి:
#సగం {వెడల్పు: 157px;
ఎత్తు: 150px;
నేపథ్యం: url ( .. / స్ప్రైట్.jpg ) -462px 0px
}
#పూర్తి {
వెడల్పు: 157px;
ఎత్తు: 150px;
నేపథ్యం: url ( .. / స్ప్రైట్.jpg ) -770px 0px
}
పై కోడ్ స్నిప్పెట్ యొక్క వివరణ:
-
- ముందుగా, 'ని ఎంచుకోండి సగం ” id మరియు పై దశలో ఉపయోగించిన అదే CSS లక్షణాలను చొప్పించండి.
- ఇమేజ్ స్ప్రైట్ నుండి మధ్య చిత్రాన్ని ప్రదర్శించడానికి, దిశను మార్చండి లేదా ఎడమ వైపు నుండి పాడింగ్‌ను కేటాయించండి. ఉదాహరణకు, ఎడమ నుండి దిశ 'కి సెట్ చేయబడింది ప్రతికూల 462px ”.
- అదే పద్ధతిలో, ఎడమ నుండి “కి దిశను సెట్ చేయడం ద్వారా చివరి చిత్రాన్ని ప్రదర్శించండి -770px ”.
పై CSS లక్షణాలను అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
పై స్నాప్‌షాట్ ఇమేజ్ స్ప్రైట్ నుండి మూడు చిత్రాలు వెబ్‌పేజీలో ప్రదర్శించబడినట్లు చూపిస్తుంది.
ముగింపు
ది ' చిత్రం స్ప్రిట్స్ ” అనేది ఒకే పెద్ద చిత్రం, ఇది కోల్లెజ్ ఫీచర్ లాగానే అనేక చిన్న చిత్రాలతో రూపొందించబడింది. మరియు చిన్న ఇమేజ్‌ని సూచించే పెద్ద ఇమేజ్‌లోని ఏదైనా భాగాన్ని ప్రదర్శించవచ్చు. ఉపయోగించి అవసరాల ప్రకారం ' నేపథ్య ” CSS అందించిన ఆస్తి. ఇమేజ్ స్ప్రైట్ నుండి నిర్దిష్ట చిత్రాన్ని ప్రదర్శించడానికి, ముందుగా చిత్రం యొక్క వెడల్పు మరియు ఎత్తును సెట్ చేయండి. ఆ తర్వాత, ఇమేజ్ స్ప్రైట్ నుండి చిత్రంలోని భాగాన్ని మాత్రమే ప్రదర్శించడానికి దిశల విలువలను ఉపయోగించండి.