The application of sprites in CSS

This article mainly introduces the application of sprites in CSS, this is a very simple application, but in the design, this can reduce the pressure on the server, is the number of requests decreased, is a good way .

The instance code is as follows:

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 Specifies that the picture be displayed starting at a certain coordinates}

Summarize:

In this small picture, even two pictures in fact, the response time is not much slower, but there is a problem, is the two pictures alternately prone to the background image from the new load, resulting in a period of time does not show the effect.

Related recommendations:

Reduce picture requests with CSS Sprites

Div+css background a full picture (CSS sprites)

CSS Sprites Technology ZT 10 days Learn WEB standard (DIV+CSS) _html/css_web-itnose