CSS Advanced tips: CSS Sprites

Previous CSS Tutorial article: CSS Advanced tips: rounded rectangles

Web Teaching Network

CSS sprites, using CSS background-position for background absolute positioning, reduce HTTP requests, accelerate Web page display, solve the picture load flashing problem skills. Web Teaching Network

CSS Sprites is best for doing, uh, like:

• Listing navigation CSS Mouse rollover effect
• Large number of small icon concentration applications (FckEditor)
• ... Many, many, many can't think out.

The principle of implementation is simply to control the size of the container, and then use Background-repeat, background-position to locate the background image. It is more understandable to integrate a large number of background maps of a Web site into a larger picture. Com

Use a mouse rollover event to illustrate:

Get ready:

01.jpg 02.jpg

HTML code: web page Teaching Network

   
•  

   
•  

   
•  

   
•  

    
•  

    
•  

    < Li>  
   
• &NBSP;

   
• &NBSP;

. Com

CSS code:

Web Teaching Network

UL {width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url (02.jpg)}
Li {list-style-type:none; width:100px; height:100px; Float:left}
Li a {display:block; width:100px; height:100px; text-decoration:none;
Background:transparent URL (01.jpg) no-repeat 500px 500px; }
A#item1:hover {background-position:0 0;}
A#item2:hover {background-position: -100px 0;}
A#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position:0 -100px;}
A#item5:hover {background-position: -100px-100px;}
A#item6:hover {background-position: -200px-100px;}
a#item7:hover {background-position:0 -200px;}
A#item8:hover {background-position: -100px-200px;}
A#item9:hover {background-position: -200px-200px;} Web Teaching Network

The effect chart is as follows:. Com

Someone's going to ask, what's the use? This can simulate the hot zone description of the picture, map hints and so on .... Com

Tips:. Com

The CSS sprites needs the accurate background picture localization, compares the person to be troublesome. Web Teaching Network

Compared to the advantages of reducing multiple HTTP requests, it increases the disadvantage of a one-time large HTTP request ... Weigh it yourself. Com

Next CSS Tutorial article: CSS Advanced tips: Picture replacement