„ sprite'y obrazkowe ” to technika, w której tworzony jest jeden duży obraz składający się z wielu pojedynczych obrazów. Dowolna część dużego obrazu może być wyświetlana w odniesieniu do wymagań projektowych. Pomaga programistom płynnie budować atrakcyjne wizualnie elementy. Sprite'y obrazu mogą być używane do ikon, przycisków i innych elementów graficznych. W tym artykule przedstawiono krok po kroku procedurę używania sprite'ów graficznych w CSS.
Jak używać I mag Sprites w CSS?
W CSS programiści wykorzystują sprite'y graficzne, aby zminimalizować/zredukować czas ładowania strony internetowej. Pomaga w zmniejszeniu liczby żądań HTTP, zapewnia szybsze ładowanie i poprawia współczynnik doświadczenia użytkownika. Na przykład odwiedź poniższy przykład:
Przykład: użycie ikonki obrazu w elemencie listy
W tym przykładzie tworzona jest uporządkowana lista, aw każdym elemencie listy część obrazu duszka jest wyświetlana na ekranie.
Warunek wstępny:
Aby uzyskać określony obraz z duszka obrazu, szczególnie ważne są wymiary używanego duszka obrazu. Na przykład obraz, który ma wymiar „ 937×156 ” pokazano poniżej:
Wykonaj poniższe czynności, aby wyświetlić część powyższego obrazu:
Krok 1: Tworzenie elementów listy
Nieuporządkowana lista jest generowana na stronie internetowej, jak widać w poniższym fragmencie kodu:
< ul >Pusty: < To ID = 'pusty' > To >
Połowa: < To ID = 'połowa' > To >
Pełny: < To ID = 'pełny' > To >
ul >
Opis powyższego fragmentu kodu:
-
- Najpierw użyj „
”znacznik. - Następnie przypisz identyfikatory „ pusty ”, „ połowa ' I ' pełny ” dla trzech elementów listy. Są one później wykorzystywane do wyświetlania części większego obrazu.
- Najpierw użyj „
Krok 2: Wyświetlanie pierwszego obrazu
Aby wyświetlić puste serce na stronie internetowej, które jest pierwszym obrazem w duszku obrazu. Użyj ' pusty ” id i wstaw następujący kod:
#pusty {szerokość: 157px;
wysokość: 150px;
tło: adres URL ( .. / sprite.jpg ) 0 0 ;
}
W powyższym wierszu kodów:
-
- Najpierw ustaw „ szerokość ' I ' wysokość ” obrazu, który programista chce wyświetlić na stronie internetowej.
- Te właściwości są przypisane do wartości „ 157 pikseli ' I ' 150 pikseli ” według powyższego przykładu, ale mogą się różnić w zależności od obrazów o innych wymiarach.
- Następnie podaj ścieżkę do „ krasnoludek ” obraz do „ tło ' nieruchomość. Teraz ustaw kierunek „ 0 ' I ' 0 ” i wyświetla pierwszą część duszka obrazu.
Po wykonaniu powyższej linijki kodu strona wygląda następująco:
Powyższa migawka pokazuje, że pierwszy obraz ze sprite'a obrazu jest wyświetlany na stronie internetowej.
Krok 3: Wyświetlanie środkowego i ostatniego obrazu
Aby wyświetlić środkową i ostatnią część obrazu z duszka obrazu, wstaw następujące właściwości CSS:
#połowa {szerokość: 157 pikseli;
wysokość: 150px;
tło: adres URL ( .. / sprite.jpg ) -462px 0px
}
#pełny {
szerokość: 157 pikseli;
wysokość: 150 pikseli;
tło: adres URL ( .. / sprite.jpg ) -770px 0px
}
Opis powyższego fragmentu kodu:
-
- Najpierw wybierz „ połowa ” id i wstaw te same właściwości CSS, które zostały użyte w powyższym kroku.
- Aby wyświetlić środkowy obraz ze sprite'a obrazu, zmień kierunek lub przypisz dopełnienie z lewej strony. Na przykład kierunek od lewej jest ustawiony na „ negatyw 462px ”.
- W ten sam sposób wyświetl ostatni obraz, ustawiając kierunek od lewej do „ -770px ”.
Po wykonaniu powyższych właściwości CSS strona wygląda następująco:
Powyższa migawka pokazuje, że trzy obrazy ze sprite'a obrazu zostały wyświetlone na stronie internetowej.
Wniosek
„ sprite'y obrazkowe ” to pojedynczy duży obraz, który składa się z wielu mniejszych obrazów, podobnie jak funkcja kolażu. Można wyświetlić dowolną część dużego obrazu reprezentującą mniejszy obraz. Zgodnie z wymaganiami przy użyciu „ tło ” właściwość dostarczona przez CSS. Aby wyświetlić określony obraz ze sprite'a obrazu, najpierw ustaw szerokość i wysokość obrazu. Następnie użyj wartości kierunków, aby wyświetlić tylko część obrazu ze sprite'a obrazu.