On the image flattening technique of CSS

This article mainly introduces the CSS image of the mosaic technology, has a certain reference value, now share to everyone, the need for friends can refer to

Image flattening is a collection of individual images.

A Web page that has many images may require a long event to load and generate requests for multiple servers.

Using image flattening reduces the number of requests to the server and saves bandwidth.

Image flattening--Creating a navigation list

<! DOCTYPE html>
Instance parsing:


 

 
  
 
   
#navlist {position:relative;}-position setting relative positioning, so that the inside of the absolute positioning
 
   
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}-margin and padding are set to 0, list styles are removed, all list items are absolutely positioned
 
   
#navlist Li, #navlist a{height:44px;display:block;}-the height of all images is 44px
 
  

 
Now start the positioning and styling of each specific section:


 

 
  
 
   
#home {left:0px;width:46px;}-navigates to the leftmost way, and the width of the image is 46px
 
   
#home {background:url (img_navsprites.gif) 0 0;}-defines the background image and its position (left 0px, top 0px)
 
   
#prev {left:63px;width:43px;}-Right position 63px (some extra space between #home wide 46px+ items), 43px width.
 
   
#prev {background:url (' img_navsprites.gif ') -47px 0;}-defines the right side of the background image 47px (1px of #home width 46px+ divider)
 
   
#next {left:129px;width:43px;} -Right position 129px (#prev 63px + #prev宽是43px + remaining space), width is 43px.
 
   
#next {background:url (' img_navsprites.gif ') no-repeat-91px 0;}-defines the right side of the background image 91px (dividing line 46px+1px width +#prev for #home 43px+1px)
 
  

 
   image flattening-hover effect   
 

<! DOCTYPE html>
Instance parsing:


  

 
   
 
    
Because the list item contains a link, we can use: hover pseudo-Class
 
    
#home a:hover{background:transparent URL (img_navsprites_hover.gif) 0-45px;}-for all three hover images, we specify the same background position, just each further down 45px
 
   

  
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!