Technologia CSS obraz mozaiki
Podział obrazu
Spłaszczyć obraz jest zbiorem pojedynczych obrazów.
Istnieje wiele obrazów na stronie może zająć dużo czasu, aby załadować i generuje wiele żądań serwera.
Użyj serwera podział obrazu zmniejszy liczbę żądań i zapisać przepustowości.
Podział obrazu - Prosty przykład
Zamiast korzystać z trzech oddzielnych obrazów, jak korzystać z tego jeden obraz ( "img_navsprites.gif"):
Z CSS, możemy pokazać tylko część obrazu potrzebujemy.
W poniższym przykładzie pokazano część określonej CSS "img_navsprites.gif" obraz:
Przykłady analizy:
- <Img class = "home" src = "img_trans.gif" /> - ponieważ nie mogą być puste, atrybut src definiuje jedynie mały przezroczysty obraz. Obraz wyświetlany będzie nam określić w CSS obrazów tła
- Width: 46px; height: 44px; - określona część obrazu, którego używamy
- background: url (img_navsprites.gif) 0 0, - niestandardowy obraz tła, a jego położenie (lewy 0px, top 0px)
Odbywa się to za pomocą obraz podzielony najprostszy sposób, a teraz używamy linków i unoszą się efektów.
Spłaszczyć obraz - aby utworzyć listę nawigację
Chcemy korzystać z podzielonego obrazu ( "img_navsprites.gif"), aby utworzyć listę nawigacji.
Użyjemy listę HTML, ponieważ może to być związane, a także obsługuje obraz tła:
Przykłady
#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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
Spróbuj »
Przykłady analizy:
- #navlist {position: relative;} - pozycja jest ustawiona względnego położenia umożliwiają pozycjonowanie bezwzględne wewnątrz
- #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - marża i wyściółka jest ustawiony na 0, styl lista zostanie usunięte, wszystkie elementy listy są absolutne pozycjonowanie
- #navlist li, #navlist się {height: 44px; display: block;} - wysokość wszystkich obrazów jest 44px
Teraz każdy specyficzny element pozycjonowania i styl:
- #home {left: 0px; width: 46px;} - umieszczone po lewej stronie, a sposób szerokość obrazu jest 46px
- #home {background: url (img_navsprites.gif) 0 0;} - niestandardowy obraz tła, a jego położenie (lewy 0px, top 0px)
- #prev {left: 63px; width: 43px;} - po prawej 63px pozycjonowania (#home szerokość 46px + jakiejś dodatkowej przestrzeni między elementami), szerokości 43px.
- #prev {background: url ( "img_navsprites.gif ') -47px 0;} - niestandardowy obraz tła po prawej 47px (#home dzielniki szerokość 46px + 1px)
- #next {left: 129px; width: 43px;} - do prawego 129px pozycjonowania (#prev 63px + szerokość #prev jest 43px + pozostała przestrzeń), szerokość wynosi 43px.
- #next {background: url ( "img_navsprites.gif") no-repeat -91px 0;} - niestandardowy obraz tła po prawej 91px (#home 46px + 1px podziału linii + # prev szerokość 43px + 1px dzielniki)
Spłaszczenie obrazu s - unoszą się efekt
Teraz chcemy, aby nasza lista nawigacji dodać efekt hover.
 | : Selektor efekt aktywowania dla Najedź kursorem na ekranie elementu Selektor Tip :: aktywowania mogą być stosowane do wszystkich elementów. |
|---|
Nasz nowy obraz ( "img_navsprites_hover.gif") zawiera trzy obrazy nawigacyjnych i trzy obrazy:
Ponieważ jest to pojedynczy obraz, zamiast sześciu oddzielny plik obrazu, gdy użytkownik przebywa na obrazie nie opóźni załadunek.
Dodajmy efektów hover p dodawać tylko trzy wiersze kodu:
Przykłady
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
Spróbuj »
Przykłady analizy:
- Ponieważ element listy zawiera link, możemy użyć: hover Pseudo-klasa
- #home a: hover {background: transparent url (img_navsprites_hover.gif) 0 -45px;} - Dla wszystkich trzech obrazów unoszą się określić tę samą pozycję w tle, ale potem w dół na 45 każdego