akoonu Marketing

Bii o ṣe le Lo Awọn Sprite CSS Pẹlu Imọlẹ Ati Ipo Dudu

CSS sprites jẹ ilana ti a lo ninu idagbasoke wẹẹbu lati dinku nọmba ti HTTP awọn ibeere ti a ṣe nipasẹ oju-iwe wẹẹbu kan. Wọn kan pipọpọ awọn aworan kekere pupọ sinu faili aworan ti o tobi kan ati lẹhinna lilo CSS lati ṣafihan awọn apakan kan pato ti aworan yẹn gẹgẹbi awọn eroja kọọkan lori oju-iwe wẹẹbu.

Anfaani akọkọ ti lilo awọn sprites CSS ni pe wọn le ṣe iranlọwọ ilọsiwaju akoko fifuye oju-iwe fun oju opo wẹẹbu kan. Ni gbogbo igba ti aworan kan ba ti kojọpọ lori oju-iwe wẹẹbu kan, o nilo ibeere HTTP lọtọ, eyiti o le fa fifalẹ ilana ikojọpọ naa. Nipa apapọ awọn aworan lọpọlọpọ sinu aworan sprite kan, a le dinku nọmba awọn ibeere HTTP ti o nilo lati ṣaja oju-iwe naa. Eyi le ja si ni iyara ati oju opo wẹẹbu idahun diẹ sii, pataki fun awọn aaye pẹlu ọpọlọpọ awọn aworan kekere bi awọn aami ati awọn bọtini.

Lilo awọn sprite CSS tun gba wa laaye lati lo anfani ti caching ẹrọ aṣawakiri. Nigbati olumulo kan ba ṣabẹwo si oju opo wẹẹbu kan, aṣawakiri wọn yoo kaṣe aworan sprite lẹhin ibeere akọkọ. Eyi tumọ si pe awọn ibeere ti o tẹle fun awọn eroja kọọkan lori oju-iwe wẹẹbu ti o nlo aworan sprite yoo yarayara pupọ nitori ẹrọ aṣawakiri yoo ti ni aworan tẹlẹ ninu kaṣe rẹ.

Awọn Sprite CSS Ko Gbajumo Bi Wọn Ti Jẹ Lẹẹkan

Awọn sprites CSS tun jẹ lilo nigbagbogbo lati mu iyara aaye pọ si, botilẹjẹpe wọn le ma jẹ olokiki bi wọn ti jẹ tẹlẹ. Nitori bandiwidi giga, ayelujara awọn ọna kika, funmorawon aworan, awọn nẹtiwọki ifijiṣẹ akoonu (CDN), ikojọpọ ọlẹ, Ati lagbara caching awọn imọ-ẹrọ, a ko rii ọpọlọpọ awọn sprites CSS bi a ti ṣe lo lori oju opo wẹẹbu… botilẹjẹpe o tun jẹ ilana nla kan. O wulo paapaa ti o ba ni oju-iwe kan ti o tọka si ọpọlọpọ awọn aworan kekere.

CSS Sprite Apeere

Lati lo awọn sprite CSS, a nilo lati ṣalaye ipo ti aworan kọọkan laarin faili aworan sprite nipa lilo CSS. Eyi ni a ṣe deede nipasẹ eto awọn background-image ati background-position awọn ohun-ini fun eroja kọọkan lori oju-iwe wẹẹbu ti o nlo aworan sprite. Nipa sisọ awọn ipoidojuko x ati y aworan naa laarin sprite, a le ṣe afihan awọn aworan kọọkan bi awọn eroja lọtọ lori oju-iwe naa. Eyi ni apẹẹrẹ… a ni awọn bọtini meji ninu faili aworan kan:

CSS Sprite Apeere

Ti a ba fẹ ki aworan ti o wa ni apa osi han, a le pese div pẹlu arrow-left bi kilasi nitorina awọn ipoidojuko ṣe afihan ẹgbẹ yẹn nikan:

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

Ati pe ti a ba fẹ lati ṣafihan itọka ọtun, a yoo ṣeto kilasi fun div wa si arrow-right.

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

Awọn Sprite CSS Fun Imọlẹ Ati Ipo Dudu

Lilo iwunilori kan ti eyi jẹ pẹlu ina ati awọn ipo dudu. Boya o ni aami tabi aworan ti o ni ọrọ dudu lori rẹ ti ko han lori abẹlẹ dudu. Mo ṣe apẹẹrẹ yii ti bọtini kan ti o ni ile-iṣẹ funfun fun ipo ina ati aarin dudu fun ipo dudu.

css sprite ina dudu

Lilo CSS, Mo le ṣe afihan ipilẹ aworan ti o yẹ ti o da lori boya olumulo nlo ipo ina tabi ipo dudu:

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

Iyatọ: Awọn alabara Imeeli Ko le ṣe atilẹyin Eyi

Diẹ ninu awọn onibara imeeli, gẹgẹbi Gmail, ko ṣe atilẹyin awọn oniyipada CSS, eyiti a lo ninu apẹẹrẹ ti Mo pese lati yipada laarin awọn ipo ina ati dudu. Eyi tumọ si pe o le nilo lati lo awọn ilana omiiran lati yipada laarin awọn ẹya oriṣiriṣi ti aworan sprite fun awọn eto awọ oriṣiriṣi.

Idiwọn miiran ni pe diẹ ninu awọn alabara imeeli ko ṣe atilẹyin awọn ohun-ini CSS kan ti a lo nigbagbogbo ni awọn sprites CSS, bii background-position. Eyi le jẹ ki o nira lati gbe awọn aworan kọọkan si laarin faili aworan sprite.

Douglas Karr

Douglas Karr jẹ CMO ti Ṣii awọn oye ati oludasile ti Martech Zone. Douglas ti ṣe iranlọwọ fun awọn dosinni ti awọn ibẹrẹ MarTech aṣeyọri, ti ṣe iranlọwọ ni aisimi ti o ju $ 5 bilionu ni awọn ohun-ini Martech ati awọn idoko-owo, ati tẹsiwaju lati ṣe iranlọwọ fun awọn ile-iṣẹ ni imuse ati adaṣe awọn tita ati awọn ilana titaja wọn. Douglas jẹ iyipada oni nọmba agbaye ti a mọye ati alamọja MarTech ati agbọrọsọ. Douglas tun jẹ onkọwe ti a tẹjade ti itọsọna Dummie ati iwe itọsọna iṣowo kan.

Ìwé jẹmọ

Pada si bọtini oke
Close

Ti ṣe awari Adblock

Martech Zone ni anfani lati pese akoonu yii fun ọ laisi idiyele nitori a ṣe monetize aaye wa nipasẹ wiwọle ipolowo, awọn ọna asopọ alafaramo, ati awọn onigbọwọ. A yoo ni riri ti o ba yọ ohun idena ipolowo rẹ bi o ṣe nwo aaye wa.