CSS Image Sprite

Image sprites

Image sprites are a collection of images contained within a single image.

Web pages that contain many images may take a long time to load and generate multiple server requests.

Using image sprites reduces the number of server requests and saves bandwidth.

Image sprite - Simple example

We use the following single image ("navsprites.gif") instead of using three separate images:

Navigationsbillede

By using CSS, we can only display a specific part of the required image.

In the following example, the CSS specifies which part of the "navsprites.gif" image to display:

eksempel

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Prøv det selv

Eksempel Forklaring:

  • <img id="home" src="trans.gif"> - Only define a small transparent image because the src attribute cannot be empty. The actual image displayed will be the background image specified in the CSS.
  • width: 46px; height: 44px; - Define the part of the image we want to use
  • background: url(navsprites.gif) 0 0; - Define the background image and its position (left 0px, top 0px)

Image sprite - Create a navigation list

We want to use sprite images ("navsprites.gif") to create a navigation list.

We will use an HTML list because it can be a link and also supports background images:

eksempel

#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;
}

Prøv det selv

Eksempel Forklaring:

  • #navlist {position:relative;} - Position set to relative to allow absolute positioning within it
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Sidestilling og indrykning sættes til 0, list-style fjernes, og alle listeelementer er absolute positionering
  • #navlist li, #navlist a {height:44px;display:block;} - Alle billeders højde er 44px

Nu begynder vi at indstille position og stil for hver specifik sektion:

  • #home {left:0px;width:46px;} - Positionerer konstant til venstre, billedbredde 46px
  • #home {background:url(navsprites.gif) 0 0;} - Definerer baggrundsbilledet og dens position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Positionerer til højre 63px (#home bredde 46px + lidt ekstra mellemrum mellem elementerne), bredde 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Definerer baggrundsbilledet til højre 47px (#home bredde 46px + 1px adskillelseslinje)
  • #next {left:129px;width:43px;} - Positionerer til højre 129px (#prev start er 63px + #prev bredde er 43px + lidt ekstra mellemrum), bredde 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Definerer baggrundsbilledet til højre 91px (#home bredde 46px + 1px adskillelseslinje+ #prev bredde 43px + 1px adskillelseslinje)

Billedspirte - Hover-effekt

Nu skal vi tilføje en hover-effekt til navigationslisten.

Tip::hover vælger kan bruges til alle elementer, og ikke kun links.

Vores nye billede ("navsprites_hover.gif") indeholder tre navigationsbilleder og tre billeder til hover-effekten:

Navigationsbillede

Fordi dette er et billede, ikke seks separate filer, så når brugeren sætter musen over billedet:Der vil ikke være indlæsningsforsinkelse.

Vi tilføjer kun tre linjer kode for at opnå hover-effekten:

eksempel

#home a:hover {
  baggrund: 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;
}

Prøv det selv

Eksempel Forklaring:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Vi har angitt samme bakgrunnsplassering for alle tre musepekeroverganger, bare 45 pixels nedover