सीएसएस इमेज स्पाइनर
- ముంది పేజీ सीएसएस इमेज लाइब्रेरी
- తదుపరి పేజీ सीएसएस एट्रिब्यूट चयनकर्ता
చిత్ర స్పైన్
చిత్ర స్పైన్ అనేది ఒక ఏకమైన చిత్రంలో ఉన్న చిత్రాల కూపు.
అనేక చిత్రాలు కలిగిన వెబ్‌పేజీలు ఎక్కువ సమయం తీసుకుంటాయి మరియు అనేక సర్వర్ అభ్యర్ధనలను తయారు చేస్తాయి.
చిత్ర స్పైన్ ఉపయోగించడం సర్వర్ అభ్యర్ధనల సంఖ్యను తగ్గించి బ్యాండ్‌విడ్డ్ ను పొదుపు చేస్తుంది.
చిత్ర స్పైన్ - సాధారణ ఉదాహరణ
మేము మూడు అలగా చిత్రాలను ఉపయోగించకుండా, ఒక ఏకమైన చిత్రాన్ని ("navsprites.gif") ఉపయోగిస్తున్నాము:
CSS ఉపయోగించి మేము మాత్రమే అవసరమైన చిత్రం భాగాన్ని చూపవచ్చు.
ఈ ఉదాహరణలో, CSS మేము "navsprites.gif" చిత్రాన్ని చూపించే ఏ భాగాన్ని నిర్వచించాము:
ఉదాహరణ
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
ఉదాహరణ వివరణం:
<img id="home" src="trans.gif">- మాత్రమే చిన్న పారదర్శక చిత్రాన్ని నిర్వచించండి ఎందుకంటే src అటువంటి లక్ష్యం ఉండదు. వాస్తవానికి చూడబడే చిత్రం మా CSS లో నిర్వచించిన బ్యాక్గ్రౌండ్ చిత్రం ఉంటుంది.width: 46px; height: 44px;- మేము ఉపయోగించాలి చిత్రం భాగాన్ని నిర్వచించండిbackground: url(navsprites.gif) 0 0;- బ్యాక్గ్రౌండ్ చిత్రాన్ని మరియు దాని స్థానాన్ని (left 0px, top 0px) నిర్వచించండి
చిత్ర స్పైన్ - నావిగేషన్ జాబితా సృష్టించడం
మేము నావిగేషన్ జాబితాను స్పైన్ చిత్రాలను ("navsprites.gif") ఉపయోగించి సృష్టించాలని కోరుకున్నాము.
మేము హెచ్మిల్ జాబితాను ఉపయోగిస్తాము ఎందుకంటే అది లింకులు ఉంటాయి మరియు బ్యాక్గ్రౌండ్ చిత్రాలను మద్దతు చేస్తుంది:
ఉదాహరణ
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
ఉదాహరణ వివరణం:
- #navlist {position:relative;} - 位置设置为相对，以允许在其中进行绝对定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - బయటపు మరియు అంతరిక్షం నిర్వచించబడలేదు, list-style తొలగించబడింది, మరియు అన్ని జాబితా అంశాలు సబ్స్క్రాప్ పోసిషన్గా ఉంటాయి
- #navlist li, #navlist a {height:44px;display:block;} - అన్ని చిత్రాల ఎత్తు 44px
ఇప్పుడు, ప్రతి ప్రత్యేక భాగానికి నిల్వ మరియు స్టైల్స్ అమర్చండి:
- #home {left:0px;width:46px;} - ఎల్లప్పుడూ ఎడమకు నిల్వ చేయండి, చిత్రం వెడల్పు 46px
- #home {background:url(navsprites.gif) 0 0;} - బ్యాక్గ్రౌండ్ చిత్రాన్ని మరియు దాని స్థానాన్ని నిర్వచించండి (left 0px, top 0px)
- #prev {left:63px;width:43px;} - కుడికి 63px నిల్వ చేయండి (#home వెడల్పు 46px + ప్రాజెక్ట్ మధ్య కొన్ని అదనపు ఖాళీ స్థానం), వెడల్పు 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - బ్యాక్గ్రౌండ్ చిత్రాన్ని కుడికి 47px చేయండి (#home వెడల్పు 46px + 1px విభజకం)
- #next {left:129px;width:43px;} - కుడికి 129px నిల్వ చేయండి (#prev ప్రారంభం 63px + #prev వెడల్పు 43px + అదనపు ఖాళీ స్థానం), వెడల్పు 43px.
- #next {background:url('navsprites.gif') -91px 0;} - బ్యాక్గ్రౌండ్ చిత్రాన్ని కుడికి 91px చేయండి (#home వెడల్పు 46px + 1px విభజకం + #prev వెడల్పు 43px + 1px విభజకం)
చిత్ర స్ప్లాయర్ - హోవర్ ప్రభావం
ఇప్పుడు, మేము నేవిగేషన్ జాబితాకు హోవర్ ప్రభావాన్ని జోడించాలి.
సూచన::hover ఎంపికకర్త అన్ని అంశాలకు వర్తిస్తుంది, కానీ లింక్స్ కు మాత్రమే లేదు.
మా కొత్త చిత్రం ("navsprites_hover.gif") మూడు నేవిగేషన్ చిత్రాలు మరియు మూడు హోవర్ ప్రభావాల చిత్రాలను కలిగి ఉంది:
ఎందుకంటే ఇది ఒక చిత్రం, ఆరు వేర్వేరు ఫైల్స్ కాదు, కాబట్టి వినియోగదారు చిత్రంపై మౌస్ నాకు ఉంచినప్పుడు,లోడ్ మిగిలింపు ఉండదు.
మేము హోవర్ ప్రభావాన్ని సాధించడానికి మాత్రమే మూడు రోమ్స్ చేస్తాము:
ఉదాహరణ
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {}}
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
ఉదాహరణ వివరణం:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - మేము మూడు హోవర్ ఇమేజులకు ఒకే బ్యాక్గ్రౌండ్ స్థానాన్ని నిర్దేశించాము, కేవలం క్రిందకు 45 పిక్సెల్స్ మాత్రమే
- ముంది పేజీ सीएसएस इमेज लाइब्रेरी
- తదుపరి పేజీ सीएसएस एट्रिब्यूट चयनकर्ता
