CssSprites small instance code _ experience exchange

Today, I visited the blue ideal and saw the Realazy tutorial CSSSprites. So I made a little thing myself. The effect is here.
This is a very simple application, but in the design, this can reduce the pressure on the server, is a good way to reduce the number of requests.
It is particularly worth noting that even two images in this small image can be slow in response time, but there is a problem, that is, when two images are alternating, the background image may be re-loaded, resulting in a period of time not displayed. (The length of time varies depending on the server's response speed and image size)

The following is a part of css:

Body {
Font-family: "Lucida Sans", "Lucida Sans Unicode ";
Font-size: 14px;
Line-height: 24px;
}
Ul {
List-style-type: none;
}
Li {
Float: left;

}
A {
Background-image: url(bg.gif );
Height: 26px;
Background-position: 53px 0px;
Display: block;
Margin-right: 10px;
Width: 53px;
Text-align: center;
Color: #333333;
}

Li a: link {
Text-decoration: none;
}
Li a: visited {
Text-decoration: none;
}
Li a: hover {
Text-decoration: none;
Background-position: 0 0px; // specifies that the image is displayed from a coordinate}


From the code above, it is not difficult to see that what plays a decisive role here is

Background-position: ** px;


In this way, in complex css applications, we can solve the problem of reloading background images.