css Sprites small example code_Experience exchange

This is a very simple application, but in the design, this can reduce the pressure on the server and reduce the number of requests, which is a good method.
It should be noted in particular that even two pictures on such a small picture are not much slower in terms of response time. However, there is a problem. When two pictures alternate, it is easy to cause the background picture to be reloaded. The effect does not show up for a long time. (The time varies depending on the server's response speed and image size)

The following is the css part:

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;//It is specified here to start displaying pictures from a certain coordinate}


It is not difficult to see from the above code that this plays a decisive role What is

background-position:* *px;


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