CSS Sprites Small Instance code _ experience Exchange

This is a very simple application, but in the design, this can reduce the pressure on the server, is a reduction in the number of requests, is a good way.
In particular, in this small picture, even if the two pictures in fact, the response time is not much slower, but there is a problem, that is, two pictures alternately prone to the background picture from the new load and lead to a period of time does not show the effect. (The length of time varies depending on the response speed of the server and the size of the picture)

The following is a section 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;//here stipulates that the picture is displayed from a coordinate


It's not hard to see from the code above that the decisive part of this is

background-position:* *px;


In this way, we can solve the problem of the new loading of the background picture in the complex CSS application.