Cov ntsiab lus Marketing

Yuav Siv CSS Sprites li cas nrog lub teeb thiab tsaus hom

CSS sprites yog cov txheej txheem siv hauv kev txhim kho lub vev xaib kom txo tau tus lej HTTP kev thov los ntawm nplooj ntawv web. Lawv koom nrog kev sib txuas ntau cov duab me me rau hauv ib daim duab loj dua thiab tom qab ntawd siv CSS los tso saib cov ntu tshwj xeeb ntawm cov duab ntawd raws li cov ntsiab lus ntawm nplooj ntawv web.

Qhov txiaj ntsig tseem ceeb ntawm kev siv CSS sprites yog tias lawv tuaj yeem pab txhim kho nplooj ntawv lub sijhawm thauj khoom rau lub vev xaib. Txhua zaus ib daim duab raug thauj khoom ntawm nplooj ntawv web, nws xav tau kev thov HTTP cais, uas tuaj yeem ua rau qeeb ntawm cov txheej txheem thauj khoom. Los ntawm kev sib txuas ntau cov duab rau hauv ib daim duab sprite, peb tuaj yeem txo tus naj npawb ntawm HTTP thov kom thauj cov nplooj ntawv. Qhov no tuaj yeem ua rau lub vev xaib nrawm dua thiab ua haujlwm ntau dua, tshwj xeeb tshaj yog rau cov chaw uas muaj ntau cov duab me me xws li cov cim thiab cov nyees khawm.

Siv CSS sprites kuj tso cai rau peb coj kom zoo dua ntawm browser caching. Thaum tus neeg siv mus ntsib lub vev xaib, lawv tus browser yuav cache cov duab sprite tom qab thawj qhov kev thov. Qhov no txhais tau hais tias tom qab thov rau tus kheej cov ntsiab lus ntawm nplooj ntawv web uas siv cov duab sprite yuav nrawm dua vim qhov browser yuav twb muaj cov duab hauv nws lub cache.

CSS Sprites tsis nrov li lawv ib zaug

CSS sprites tseem nquag siv los txhim kho qhov chaw ceev, txawm hais tias lawv yuav tsis nrov li lawv ib zaug. Vim yog high bandwidth, webp hom ntawv, zaws thaij, cov ntsiab lus xa tawm network (CDN), neeg tub nkeeg chaw thau khoom, Thiab muaj zog caching thev naus laus zis, peb tsis pom ntau CSS sprites li peb tau siv rau hauv lub vev xaib… txawm hais tias nws tseem yog lub tswv yim zoo. Nws yog qhov tshwj xeeb tshaj yog tias koj muaj nplooj ntawv uas hais txog ntau cov duab me me.

CSS Sprite Piv txwv

Txhawm rau siv CSS sprites, peb yuav tsum tau txhais txoj haujlwm ntawm txhua tus duab hauv cov duab sprite siv CSS. Qhov no feem ntau yog ua los ntawm kev teeb tsa background-image thiab background-position cov khoom rau txhua lub caij ntawm nplooj ntawv web uas siv cov duab sprite. Los ntawm kev qhia txog x thiab y kev tswj hwm ntawm cov duab hauv sprite, peb tuaj yeem tso cov duab ib leeg raws li cov ntsiab lus sib cais ntawm nplooj ntawv. Ntawm no yog ib qho piv txwv… peb muaj ob lub nyees khawm hauv ib daim duab duab:

CSS Sprite Piv txwv

Yog tias peb xav kom cov duab ntawm sab laug tso tawm, peb tuaj yeem muab cov div nrog arrow-left raws li cov chav kawm yog li lub coordinates tsuas yog tso saib sab ntawd:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Thiab yog hais tias peb xav tso saib txoj cai xub, peb yuav teem lub chav kawm rau peb div rau arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

CSS Sprites Rau Lub Teeb Thiab Tsaus Hom

Ib qho nthuav siv ntawm qhov no yog nrog lub teeb thiab tsaus hom. Tej zaum koj muaj lub logo lossis duab uas muaj cov ntawv tsaus rau nws uas tsis pom ntawm qhov tsaus ntuj. Kuv tau ua qhov piv txwv ntawm lub pob uas muaj qhov chaw dawb rau lub teeb hom thiab qhov chaw tsaus rau hom tsaus.

css sprite teeb tsaus

Siv CSS, Kuv tuaj yeem tso saib cov duab tsim nyog raws li seb tus neeg siv puas siv hom teeb lossis hom tsaus:

: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);
}

Kev zam: Cov neeg siv email yuav tsis txhawb qhov no

Qee tus neeg siv email, xws li Gmail, tsis txhawb CSS qhov hloov pauv, uas yog siv hauv qhov piv txwv kuv tau muab los hloov ntawm hom teeb thiab tsaus. Qhov no txhais tau hais tias koj yuav tau siv lwm txoj kev los hloov ntawm cov qauv sib txawv ntawm cov duab sprite rau cov xim sib txawv.

Lwm qhov kev txwv yog tias qee tus neeg siv email tsis txhawb qee yam CSS cov khoom uas feem ntau siv hauv CSS sprites, xws li background-position. Qhov no tuaj yeem ua rau nws nyuaj rau tso cov duab ntawm tus kheej hauv cov ntaub ntawv sprite duab.

Douglas Karr

Douglas Karr yog CMO OpenINSIGHTS thiab tus founder ntawm lub Martech Zone. Douglas tau pab ntau ntau qhov kev vam meej MarTech startups, tau pab nyob rau hauv kev mob siab rau ntau tshaj $ 5 bil nyob rau hauv Martech nrhiav thiab kev nqis peev, thiab txuas ntxiv pab cov tuam txhab hauv kev siv thiab automating lawv cov kev muag khoom thiab kev lag luam cov tswv yim. Douglas yog tus paub thoob ntiaj teb kev hloov pauv digital thiab MarTech kws tshaj lij thiab hais lus. Douglas tseem yog tus sau phau ntawv Dummie phau ntawv qhia thiab phau ntawv ua lag luam.

lwm yam khoom

Rov qab mus rau sab saum toj
Close

Adblock nrhiav tau

Martech Zone muaj peev xwm muab cov ntsiab lus no rau koj yam tsis muaj nqi vim tias peb tau txais peb lub vev xaib los ntawm kev tshaj tawm cov nyiaj tau los, koom nrog kev sib txuas, thiab kev txhawb nqa. Peb yuav txaus siab yog tias koj yuav tshem koj cov ad blocker thaum koj saib peb lub xaib.