Momwe Mungagwiritsire Ntchito CSS Sprites Ndi Kuwala Ndi Mdima Wamdima
CSS sprites ndi njira yomwe imagwiritsidwa ntchito popanga intaneti kuti muchepetse kuchuluka kwa HTTP zopempha zopangidwa ndi tsamba lawebusayiti. Zimaphatikizapo kuphatikiza zithunzi zing'onozing'ono zingapo mufayilo imodzi yokulirapo ndikugwiritsa ntchito CSS kuwonetsa magawo enaake a chithunzicho ngati zinthu pamasamba.
Phindu lalikulu logwiritsa ntchito ma CSS sprites ndikuti atha kuthandiza kukonza nthawi yodzaza tsamba patsamba. Nthawi iliyonse chithunzi chikakwezedwa patsamba, pamafunika pempho lapadera la HTTP, lomwe lingachedwetse kutsitsa. Mwa kuphatikiza zithunzi zambiri kukhala chithunzi chimodzi cha sprite, titha kuchepetsa kuchuluka kwa zopempha za HTTP zomwe zimafunikira kuti titsegule tsambali. Izi zitha kupangitsa tsamba lawebusayiti lachangu komanso lolabadira, makamaka masamba omwe ali ndi zithunzi zazing'ono zambiri ngati zithunzi ndi mabatani.
Kugwiritsa ntchito ma CSS sprites kumatithandizanso kugwiritsa ntchito mwayi wosunga msakatuli. Wogwiritsa akayendera tsamba la webusayiti, msakatuli wawo amasunga chithunzi cha sprite atapempha koyamba. Izi zikutanthawuza kuti zopempha zotsatila za zinthu zomwe zili pa tsamba la webusayiti zomwe zikugwiritsa ntchito chithunzi cha sprite zidzakhala zachangu kwambiri popeza msakatuliyo adzakhala ndi chithunzicho kale.
CSS Sprites Sali Otchuka Monga Kale
Ma CSS sprites amagwiritsidwabe ntchito kupititsa patsogolo liwiro la tsamba, ngakhale sangakhale otchuka monga kale. Chifukwa cha kuchuluka kwa bandwidth, webp mawonekedwe, kusinthasintha kwajambula, maukonde otumizira zinthu (CDN), Kutsegula kwaulesindipo chosungira champhamvu matekinoloje, sitikuwona ma CSS ambiri monga momwe timachitira pa intaneti… ngakhale ikadali njira yabwino kwambiri. Ndizothandiza makamaka ngati muli ndi tsamba lomwe likuwonetsa unyinji wazithunzi zazing'ono.
CSS Sprite Chitsanzo
Kuti tigwiritse ntchito ma CSS sprites, tiyenera kufotokozera malo a chithunzi chilichonse mkati mwa fayilo ya sprite pogwiritsa ntchito CSS. Izi zimachitika kawirikawiri pokhazikitsa background-image
ndi background-position
katundu wa chinthu chilichonse patsamba lomwe limagwiritsa ntchito chithunzi cha sprite. Mwa kufotokoza makonzedwe a x ndi y a chithunzi mkati mwa sprite, titha kuwonetsa zithunzi pawokha ngati zinthu zosiyana patsamba. Nachi chitsanzo... tili ndi mabatani awiri mufayilo imodzi yokha:
Ngati tikufuna kuti chithunzi chakumanzere chiwonetsedwe, titha kupereka div arrow-left
monga kalasi kotero zolumikizira zimangowonetsa mbaliyo:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ndipo ngati tikufuna kuwonetsa muvi wolondola, tingakhazikitse kalasi ya div yathu arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Kwa Kuwala Ndi Mawonekedwe Amdima
Kugwiritsidwa ntchito kosangalatsa kwa izi ndi mitundu yowala komanso yakuda. Mwina muli ndi logo kapena chithunzi chomwe chili ndi mawu akuda omwe sawoneka pamdima wakuda. Ndinachita chitsanzo ichi cha batani lomwe lili ndi malo oyera amtundu wa kuwala ndi malo amdima amdima.
Pogwiritsa ntchito CSS, nditha kuwonetsa chakumbuyo koyenera kwa chithunzi kutengera ngati wogwiritsa ntchito akugwiritsa ntchito kuwala kapena mdima:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Kupatulapo: Makasitomala a Imelo Sangathandizire Izi
Makasitomala ena a imelo, monga Gmail, samathandizira zosintha za CSS, zomwe zimagwiritsidwa ntchito pachitsanzo chomwe ndidapereka kusinthana pakati pa mitundu yowala ndi yakuda. Izi zikutanthauza kuti mungafunike kugwiritsa ntchito njira zina kuti musinthe pakati pa mitundu yosiyanasiyana ya chithunzi cha sprite pamitundu yosiyanasiyana.
Cholepheretsa china ndikuti makasitomala ena a imelo samathandizira zinthu zina za CSS zomwe zimagwiritsidwa ntchito mu CSS sprites, monga background-position
. Izi zitha kukhala zovuta kuyika zithunzi pawokha mufayilo ya sprite.