' obrazových škriatkov “ je technika, pri ktorej sa vytvorí jeden veľký obrázok, ktorý pozostáva z viacerých samostatných obrázkov. A akákoľvek časť veľkého obrazu môže byť zobrazená vzhľadom na požiadavky na dizajn. Pomáha vývojárom hladko vytvárať vizuálne príťažlivé prvky. Obrazové sprity možno použiť pre ikony, tlačidlá a iné grafické prvky. Tento článok ukazuje postupný postup používania obrázkových spritov v CSS.
Ako používať I mágových škriatkov v CSS?
V CSS vývojári využívajú obrázkové sprity na minimalizáciu/skrátenie času načítania webovej stránky. Pomáha znižovať požiadavky HTTP, zaisťuje rýchlejšie načítanie a zlepšuje faktor používateľskej skúsenosti. Navštívte napríklad nasledujúci príklad:
Príklad: Použitie Image Sprite v položke zoznamu
V tomto príklade sa vytvorí usporiadaný zoznam a v každej položke zoznamu sa na obrazovke zobrazí časť obrázku sprite.
Predpoklad:
Na získanie konkrétneho obrázka z obrazového spritu sú obzvlášť dôležité rozmery obrazového spritu, ktorý sa používa. Napríklad obrázok, ktorý má rozmer „ 937 × 156 “ je zobrazený nižšie:
Ak chcete zobraziť časť vyššie zobrazeného obrázka, postupujte podľa nasledujúcich krokov:
Krok 1: Vytvorenie položiek zoznamu
Nezoradený zoznam sa generuje na webovej stránke, ako je vidieť v úryvku kódu nižšie:
< ul >Prázdne: < že id = 'prázdny' > že >
polovica: < že id = 'polovica' > že >
Úplné: < že id = 'plné' > že >
ul >
Popis vyššie uvedeného útržku kódu:
-
- Najprv použite „
” tag. - Ďalej priraďte identifikátory „ prázdny “, “ polovicu “ a „ plný “ pre tri položky zoznamu. Tie sa neskôr použijú na zobrazenie časti väčšieho obrazu.
- Najprv použite „
Krok 2: Zobrazenie prvého obrázka
Na zobrazenie prázdneho srdca na webovej stránke, ktorá je prvým obrázkom v obrázkovom sprite. Použi ' prázdny ” id a vložte nasledujúci kód:
#empty {šírka: 157px;
výška: 150px;
pozadie: url ( .. / sprite.jpg ) 0 0 ;
}
Vo vyššie uvedenom riadku kódov:
-
- Najprv nastavte „ šírka “ a „ výška ” obrázka, ktorý chce vývojár zobraziť na webovej stránke.
- Tieto vlastnosti sú priradené k hodnotám „ 157 pixelov “ a „ 150 pixelov “ podľa vyššie uvedeného príkladu, ale môžu sa líšiť v porovnaní s obrázkami s rôznymi rozmermi.
- Ďalej zadajte cestu k „ škriatok “obrázok na “ pozadie ' nehnuteľnosť. Teraz nastavte smer „ 0 “ a „ 0 “ a zobrazí prvú časť obrazového sprite.
Po vykonaní vyššie uvedeného riadku kódu bude webová stránka vyzerať takto:
Vyššie uvedená snímka ukazuje, že na webovej stránke je zobrazený prvý obrázok z obrázkového sprite.
Krok 3: Zobrazenie stredného a posledného obrázka
Ak chcete zobraziť strednú a poslednú časť obrázka z obrázkového sprite, vložte nasledujúce vlastnosti CSS:
#polovica {šírka: 157px;
výška: 150px;
pozadie: url ( .. / sprite.jpg ) -462 pixelov 0px
}
#full {
šírka: 157px;
výška: 150px;
pozadie: url ( .. / sprite.jpg ) -770 pixelov 0px
}
Popis vyššie uvedeného útržku kódu:
-
- Najprv vyberte „ polovicu ” id a vložte rovnaké vlastnosti CSS, ktoré sa používajú vo vyššie uvedenom kroku.
- Ak chcete zobraziť stredný obrázok z obrázkového sprite, zmeňte smer alebo priraďte výplň z ľavej strany. Napríklad smer zľava je nastavený na „ záporných 462 pixelov “.
- Rovnakým spôsobom zobrazte posledný obrázok nastavením smeru zľava na „ -770 pixelov “.
Po vykonaní vyššie uvedených vlastností CSS sa webová stránka zobrazí takto:
Vyššie uvedená snímka ukazuje, že na webovej stránke boli zobrazené tri obrázky z obrázkového sprite.
Záver
' obrazových škriatkov “ je jeden veľký obrázok, ktorý sa skladá z viacerých menších obrázkov, rovnako ako funkcia koláže. A môže byť zobrazená akákoľvek časť veľkého obrázka, ktorá predstavuje menší obrázok. Podľa požiadaviek pomocou „ pozadie ” vlastnosť poskytovaná CSS. Ak chcete zobraziť konkrétny obrázok z obrázkového sprite, najskôr nastavte šírku a výšku obrázka. Potom použite hodnoty smerov na zobrazenie iba časti obrázka z obrázkového spritu.