Image sprites and image sprites

Image sprites and image sprites

At the weekend, I studied the implementation of Sprite. The sprite is also called the css sprite. That is, merge the small icon and background image into an image, and then use the css background to locate the image to be displayed.

1. Advantages:

This effectively reduces the number of http requests for websites and accelerates the display of images.

2. conditions:

• Static Images and images are changed without changing user information.
• Small image, small size (2 ~ 3 k ).
• Images are loaded in large quantities.

Note: We do not recommend using sprite images for large images. The images are so big. After the fight, it is not as powerful as the dismounting machine. loading will slow down. The loss is worth the candle !!!

3. Principle: Use the background-position function of css3 to control the area range of a layer and slide the background image through a window.

Simply put, this attribute is used to set the starting position of the background image to be displayed, and the range of the background image is controlled through tags.

4. Let's take a look at the background-position attribute,

As shown in the figure:

• Take the upper left corner as the (0, 0) Coordinate
• Both x and y are negative values.

In summary, the value of background-position is the starting coordinate of the background image, in the form of background-position: 0, 0;

5. Jigsaw puzzle: You can use ps or many online sprite generation tools to generate sprites.

I used an online puzzle tool to manually drag and drop the comments, which is a bit disgusting ~~ Haha

In fact, the best puzzle is to control the margin of each icon and the remaining white space around the icon. If the coordinates of css background-position are regular, A lot better (however, this is manually dragged by myself, and the location is very irregular, so the following coordinate values are only available after debugging)

 

Now that you have finished speaking about this, you can start with the html and css code. The following code simulates the generation of a menu ~~~

6. Code:

1 <div id = "content"> 2 <ul class = "content"> 3 <li class = "cat-1"> 4 <I> </I> 5 
 1   <style type="text/css" > 2    #content{ 3        width: 180px; 4        background: #f8f8f8; 5        border: 1px solid #bbb; 6    } 7    h3{ 8        margin: 0; 9        padding: 0;10    }11     ul{12         list-style: none;13         padding: 0;14     }15     li h3{16         font-size: 14px;17         font-weight: 400;18     }19     li{  20         margin:  3px 10px 0 0;21         display: block;22         height: 31px;23         line-height: 31px;24         overflow: hidden;25         border-bottom: 1px solid #dedede;26 27     }28     li i{29 background:  url(sprite.png);30 display: inline;31 width: 40px;32 height: 28px;33 float: left;34     }35     .cat-1 i{36         background-position: -7px -5px;37     }38    .cat-2 i{39         background-position: -2px -35px;40     }41     .cat-3 i{42         background-position: -7px -65px;43     }44     .cat-4 i{45         background-position: -7px -105px;46     }47     .cat-5 i{48         background-position: -7px -129px;49     }50     .cat-6 i{51         background-position: -7px -151px;52     }53     .cat-7 i{54         background-position:-60px -4px;55     }56     .cat-8 i{57         background-position:-56px -33px;58     }59     .cat-9 i{60         background-position: -56px -66px;61     }62     .cat-10 i{63         background-position:-60px -103px;64     }65     .cat-11 i{66         background-position: -51px -128px;67     }68 69    </style>
7. as follows:

 
 
The Application of Sprite is like this ~~ Incorrect. Please point it out ~~ Hahaha