Image sprite CSS
- Poprzednia strona Biblioteka obrazów CSS
- Następna strona Selektory atrybutów CSS
Obraz duchowy
Obraz duchowy to zestaw obrazów zawarty w jednym obrazie.
Strony zawierające wiele obrazów mogą być długo ładowane i generować wiele żądań serwerowych.
Użycie obrazu duchowego zmniejszy liczbę żądań serwerowych i oszczędzi przestrzeni dyskowej.
Obraz duchowy - Prosty przykład
Używamy jednego obrazu ("navsprites.gif") zamiast trzech oddzielnych obrazów:
Dzięki CSS możemy wyświetlić tylko część wymaganej grafiki.
W poniższym przykładzie, CSS określa, który fragment obrazu "navsprites.gif" ma być wyświetlony:
przykład
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
Wyjaśnienie przykładu:
<img id="home" src="trans.gif">- Zdefiniuj mały, przezroczysty obraz, ponieważ atrybut src nie może być pusty. W rzeczywistości wyświetlony obraz będzie tym, który określiliśmy w CSS.width: 46px; height: 44px;- Zdefiniuj część obrazu, którą chcemy użyćbackground: url(navsprites.gif) 0 0;- Zdefiniuj obraz tła oraz jego pozycję (left 0px, top 0px)
Obraz duchowy - Tworzenie listy nawigacyjnej
Chcemy użyć obrazów duchowych ("navsprites.gif") do stworzenia listy nawigacyjnej.
Użyjemy listy HTML, ponieważ może ona być linkiem oraz obsługuje obrazy 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;
}
Wyjaśnienie przykładu:
- #navlist {position:relative;} - Ustawienie pozycji na względne, aby umożliwić absolutną lokalizację wewnątrz
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Marginesy i wewnętrzne wypełnienie ustawione na 0, usunięty list-style, a wszystkie elementy listy są pozycjonowane absolutnie
- #navlist li, #navlist a {height:44px;display:block;} - Wysokość wszystkich obrazów wynosi 44px
Teraz zaczynamy ustawiać pozycje i style dla każdego konkretnego elementu:
- #home {left:0px;width:46px;} - Stałe pozycjonowanie w lewo, szerokość obrazu 46px
- #home {background:url(navsprites.gif) 0 0;} - Definiowanie obrazu tła oraz jego pozycji (left 0px, top 0px)
- #prev {left:63px;width:43px;} - Pozycjonowanie w prawo 63px (szerokość #home 46px + dodatkowa przestrzeń między elementami), szerokość 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - Definiowanie obrazu tła w prawo 47px (szerokość #home 46px + 1px separator)
- #next {left:129px;width:43px;} - Pozycjonowanie w prawo 129px (start #prev 63px + szerokość #prev 43px + dodatkowa przestrzeń), szerokość 43px.
- #next {background:url('navsprites.gif') -91px 0;} - Definiowanie obrazu tła w prawo 91px (szerokość #home 46px + 1px separator + szerokość #prev 43px + 1px separator)
Image sprite - efekt podświetlenia
Teraz dodajemy efekt podświetlenia do listy nawigacji.
Wskazówka::hover selektor można zastosować do wszystkich elementów, a nie tylko do linków.
Nasze nowe obrazy ("navsprites_hover.gif") zawierają trzy obrazy nawigacji i trzy obrazy do efektu podświetlenia:
Ponieważ to jest obraz, a nie sześć osobnych plików, więc gdy użytkownik wskazuje na obraz,Nie będzie opóźnienia w ładowaniu.
Dodajemy tylko trzy linie kodu, aby uzyskać efekt podświetlenia:
przykład
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
Wyjaśnienie przykładu:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Ustawiliśmy ten sam punkt tła dla wszystkich trzech obrazów przytrzymanych, jedynie o 45 pikseli w dół
- Poprzednia strona Biblioteka obrazów CSS
- Następna strona Selektory atrybutów CSS
