' obrazové skřítky “ je technika, při které je vytvořen jeden velký obrázek, který se skládá z více jednotlivých obrázků. A jakákoliv část velkého obrazu může být zobrazena vzhledem k požadavkům na design. Pomáhá vývojářům hladce vytvářet vizuálně přitažlivé prvky. Obrazové sprity lze použít pro ikony, tlačítka a další grafické prvky. Tento článek ukazuje krok za krokem postup použití obrázkových spritů v CSS.
Jak používat I mágové skřítky v CSS?
V CSS vývojáři využívají obrázkové sprity k minimalizaci/zkrácení doby načítání webové stránky. Pomáhá snižovat požadavky HTTP, zajišťuje rychlejší načítání a zlepšuje faktor uživatelské zkušenosti. Navštivte například níže uvedený příklad:
Příklad: Použití Image Sprite v položce seznamu
V tomto příkladu je vytvořen uspořádaný seznam a v každé položce seznamu je na obrazovce zobrazena část obrázku spritu.
Předpoklad:
Pro získání konkrétního obrázku z obrazového spritu jsou rozměry použitého obrazového spritu obzvláště důležité. Například obrázek, který má rozměr „ 937×156 “ je zobrazen níže:
Chcete-li zobrazit část výše zobrazeného obrázku, postupujte podle následujících kroků:
Krok 1: Vytvoření položek seznamu
Neuspořádaný seznam je generován na webové stránce, jak je vidět na níže uvedeném úryvku kódu:
< ul >Prázdný: < že id = 'prázdný' > že >
Polovina: < že id = 'polovina' > že >
Plný: < že id = 'plný' > že >
ul >
Popis výše uvedeného fragmentu kódu:
-
- Nejprve použijte „
” tag. - Dále přiřaďte ID „ prázdný “, “ polovina ' a ' plný “ pro tři položky seznamu. Ty se později použijí k zobrazení části většího obrazu.
- Nejprve použijte „
Krok 2: Zobrazení prvního obrázku
Pro zobrazení prázdného srdce na webové stránce, která je prvním obrázkem v obrázkovém spritu. Použijte „ prázdný ”id a vložte následující kód:
#empty {šířka: 157px;
výška: 150px;
pozadí: url ( .. / sprite.jpg ) 0 0 ;
}
Ve výše uvedeném řádku kódů:
-
- Nejprve nastavte „ šířka ' a ' výška ” obrázku, který chce vývojář zobrazit na webové stránce.
- Tyto vlastnosti jsou přiřazeny k hodnotám „ 157 pixelů ' a ' 150 pixelů “ podle výše uvedeného příkladu, ale mohou se lišit vzhledem k obrázkům s různými rozměry.
- Dále zadejte cestu k „ skřítek “obrázek na “ Pozadí ' vlastnictví. Nyní nastavte směr „ 0 ' a ' 0 “ a zobrazí první část obrázku sprite.
Po provedení výše uvedeného řádku kódu vypadá webová stránka takto:
Výše uvedený snímek ukazuje, že na webové stránce je zobrazen první obrázek z obrázkového spritu.
Krok 3: Zobrazení středního a posledního obrázku
Pro zobrazení střední a poslední části obrázku z obrázkového spritu vložte následující vlastnosti CSS:
#polovina {šířka: 157px;
výška: 150px;
pozadí: url ( .. / sprite.jpg ) -462 pixelů 0px
}
#plný {
šířka: 157px;
výška: 150px;
pozadí: url ( .. / sprite.jpg ) -770 pixelů 0px
}
Popis výše uvedeného fragmentu kódu:
-
- Nejprve vyberte „ polovina ” id a vložte stejné vlastnosti CSS, jaké jsou použity ve výše uvedeném kroku.
- Chcete-li zobrazit prostřední obrázek z obrázkového spritu, změňte směr nebo přiřaďte výplň z levé strany. Například směr zleva je nastaven na „ záporných 462 pixelů “.
- Stejným způsobem zobrazte poslední snímek nastavením směru zleva na „ -770 pixelů “.
Po provedení výše uvedených vlastností CSS se webová stránka zobrazí takto:
Výše uvedený snímek ukazuje, že na webové stránce byly zobrazeny tři obrázky z obrázkového spritu.
Závěr
' obrazové skřítky “ je jeden velký obrázek, který se skládá z několika menších obrázků, stejně jako funkce koláže. A lze zobrazit jakoukoli část velkého obrázku, která představuje menší obrázek. Podle požadavků pomocí „ Pozadí ” vlastnost poskytovaná CSS. Chcete-li zobrazit konkrétní obrázek z obrázkového spritu, nejprve nastavte šířku a výšku obrázku. Poté použijte hodnoty směrů k zobrazení pouze části obrázku z obrázkového spritu.