Sprite obrazu CSS
Sprites obrazu
Sprite obrazu to zbiór obrazów umieszczonych w jednym obrazie.
Wczytywanie strony internetowej z wieloma obrazami może zająć dużo czasu i generuje wiele żądań serwera.
Używanie sprite'ów obrazu zmniejszy liczbę żądań serwera i oszczędzi przepustowość.
Obraz Sprites — prosty przykład
Zamiast używać trzech oddzielnych obrazów, używamy tego pojedynczego obrazu ("img_navsprites.gif"):
Dzięki CSS możemy pokazać tylko tę część obrazu, której potrzebujemy.
W poniższym przykładzie CSS określa, którą część obrazu „img_navsprites.gif” należy wyświetlić:
Przykład
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Przykład wyjaśniony:
<img id="home" src="img_trans.gif">- Definiuje tylko mały przezroczysty obrazek, ponieważ atrybut src nie może być pusty. Wyświetlany obraz będzie obrazem tła, który określamy w CSSwidth: 46px; height: 44px;- Określa część obrazu, którego chcemy użyćbackground: url(img_navsprites.gif) 0 0;- Definiuje obraz tła i jego położenie (lewy 0px, górny 0px)
To najłatwiejszy sposób na użycie ikonek obrazkowych, teraz chcemy go rozszerzyć za pomocą linków i efektów najechania.
Image Sprites - Utwórz listę nawigacyjną
Chcemy użyć obrazu duszka ("img_navsprites.gif") do stworzenia listy nawigacyjnej.
Użyjemy listy HTML, ponieważ może to być link, a także obsługuje obraz tła:
Przykład
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Przykład wyjaśniony:
- #navlist {position:relative;} — pozycja jest ustawiona na relatywną, aby umożliwić bezwzględne pozycjonowanie wewnątrz niej
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — margines i dopełnienie są ustawione na 0, styl listy jest usuwany, a wszystkie elementy listy są pozycjonowane bezwzględnie
- #navlist li, #navlist a {height:44px;display:block;} - wysokość wszystkich obrazów to 44px
Teraz zacznij ustalać pozycję i styl dla każdej konkretnej części:
- #home {left:0px;width:46px;} - Umieszczony maksymalnie w lewo, a szerokość obrazu to 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Określa obraz tła i jego położenie (lewy 0px, górny 0px)
- #prev {left:63px;width:43px;} - Umieszczony 63px po prawej (#home szerokość 46px + dodatkowa przestrzeń między elementami), a szerokość to 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Definiuje obraz tła 47px w prawo (#home szerokość 46px + 1px linia podziału)
- #next {left:129px;width:43px;}- Umieszczony 129px po prawej (początek #prev to 63px + #prev width 43px + dodatkowa spacja), a szerokość to 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definiuje obraz tła 91px po prawej (#home szerokość 46px + 1px linia podziału + #prev szerokość 43px + 1px linia podziału )
Sprites obrazu – efekt zawisu
Teraz chcemy dodać efekt najechania do naszej listy nawigacyjnej.
Wskazówka: Selektora :hovermożna używać na wszystkich elementach, nie tylko na linkach.
Nasz nowy obraz („img_navsprites_hover.gif”) zawiera trzy obrazy nawigacyjne i trzy obrazy do użycia w efektach najechania:
Ponieważ jest to jeden obraz, a nie sześć oddzielnych plików, nie będzie opóźnienia ładowania , gdy użytkownik najedzie kursorem na obraz.
Dodajemy tylko trzy wiersze kodu, aby dodać efekt najechania:
Przykład
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
Przykład wyjaśniony:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Dla wszystkich trzech obrazów po najechaniu myszą określamy tę samą pozycję tła, tylko 45px dalej w dół