Marketing okhutira

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:

CSS Sprite Chitsanzo

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.

css sprite kuwala mdima

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.

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.