HTML and CSS Reference
In-Depth Information
CSS SPRITES
The preceding examples work well, but what about implementing multiple icons?
Having to pull in a separate image file for each icon introduces a whole lot of HTTP
requests: To make your code more e
cient, you can use CSS sprites. The idea is
that you combine all of your images into a single file, and then show the different
icons by varying the
background-position
property. Your code will look like this
(see basic-icons-css-sprites.html):
ul li:nth-of-type(1) a {
: ;
background-position: 35% 10px;
}
ul li:nth-of-type(2) a {
: ;
background-position: 35% -40px;
}
ul li:nth-of-type(3) a {
: ;
background-position: 35% -90px;
}
ul li:nth-of-type(4) a {
: ;
background-position: 35% -140px;
}
In each rule the
background-position
has the same horizontal value but
increasing vertical values; each increase pushes the image farther and farther
upwards, so that you only have to load a single file but can display different icons
