Kuidas CSS sprite'id lehel või veebisaidil rakendatakse?

CSS-spraiti realizē, apvienojot vairākus attēlus vienā lielā attēlā. Iegūtais attēls tiek izmantots kā fons dažādiem elementiem lapā, un skatīšanās laukuma (spraita) pozicionēšana šajā attēlā tiek veikta ar background-image un background-position īpašībām.

Realizācijas process ietver šādus soļus:

1. Attēlu apvienošana: Vairāki mazi attēli (ikoni, pogas, interfeisa daļas) tiek apvienoti vienā grafiskajā failā (piemēram, PNG vai JPG) ar grafisko redaktoru vai speciālu rīku spraitu veidošanai.

2. Izmēru un pozīciju noteikšana: Katram attēlam spraitā tiek noteikti tā izmēri (platums un augstums) un pozīcija (augšējā kreisā stūra koordinātas) kopējā spraita attēlā.

3. CSS stilu piemērošana: CSS tiek definēti stili elementiem, kas izmantos spraitu.

   • background-image: Norāda ceļu uz spraita failu.
   • background-repeat: Uzstāda no-repeat, lai novērstu spraita atkārtošanos.
   • width un height: Nosaka apgabala izmērus, kurā tiks attēlots konkrēts spraits (sākotnējā maza attēla izmēri).
   • background-position: Nosaka, kura spraita daļa būs redzama. Vērtība (piemēram, 0 0, -50px 0, center top) norāda nobīdi no spraita augšējā kreisā stūra uzskatā.

Piemērs lietošanai:

/* Kopējā spraita stili */
.sprite {
  background-image: url('path/to/your/sprite.png'); /* Ceļš uz spraita failu */
  background-repeat: no-repeat; /* Atspējojam atkārtošanos */
  display: inline-block; /* Vai cits piemērots display */
}

/* Konkrētu ikonu stili */
.icon-home {
  width: 32px; /* "Mājas" ikonas platums */
  height: 32px; /* "Mājas" ikonas augstums */
  background-position: 0 0; /* Ikonas "māja" pozīcija spraitā */
}

.icon-settings {
  width: 24px; /* "}