First look at a picture:
- How many CSS backgrounds does a page typically load?
- What are the typical types of sprite?
- How large is the size of the sprite chart? How to arrange?
- How does sprite map distribute in the site?
Have you ever bothered with the above issues? With the above points, we will discuss the site of the snow blue map How to plan more reasonable.
First of all, let's recall what types of footage are used when cutting the page?
I try to think ... Hard to think Ah ... There are probably: buttons, icons, other fixed-size background, vertical tile background, horizontal background map, background map, left and right adaptive background, up and down adaptive background, brightly colored and large size background.
It seems a bit messy, let's divide the class.
the scope used by Sprite can be divided into: Cross Project General, global, column level, page level
According to the snow-blue diagram to achieve the way can be divided into: fixed size sprite, horizontal shop Sprite, vertical snow blue map (less use), or vertically tiled background map (less use)
Then, we will recall the material map of the class:
by Scope: These materials may appear in different scopes at different sites
By way of implementation:
- Fixed size sprite: Buttons, icons, other fixed-size background, brightly colored, larger-than-size background images
- Cross-paved sprite: Horizontal spread background map, left-right adaptive background map (without the use of nine Sudoku Implementation)
- Vertical Snow Blue Map: Vertical background map, up and down adaptive background map (without the use of nine Sudoku Implementation)
- Tile background map: This kind of diagram can not synthesize sprite map, generally used for Web page background pattern, most sites are less than appear
Finally, how many Zhang Xiebi should we do from the site's achievable nature? Take a look at this table below:
From the table, you can analyze the number of requests for a page's background image:
Is it shocking to see the most situation? Oh, in fact, very few will happen to use the situation, according to the actual situation of the page combination, the number of requests will not be many, compared with the first illustration of the background map request number, the planning is much clearer, the number of requests also reduced a lot.
How can these graphs be cut, distributed, and named, and there is nothing particular about them? Here are my personal opinions and suggestions:
- Horizontal map width using 20px, the use of 1px width of the spread will have rendering performance problems, vertical paving the same. I will not elaborate on the internet search, there are related examples.
- The fixed size of the sprite can generally be set to width is half the width of the page, height with the picture content growth. Because you may not know the size of the picture before you cut it, my opinion is that by the end of the Chettu you may not need to use a repeat-x.png map to put an adaptive background map, in most cases, we will use 2 tags to use the sliding door to achieve an adaptive background, and page width Half of the time to achieve the maximum width of the left and right adaptive background, then you can put the adaptive background into this sprite picture
- When you flatten a picture, the fixed size diagram is 1 pixels apart from the diagram, so that when you enlarge the browser, you can see the adjacent picture when the size is 1 pixels.
- Column-level sprite name according to the column level directory name, page-level sprite name by the name of the page, component class and skin-like sprite diagram of the same, other can be named by the name of the table, so that easy to distinguish and later management
- Cross-project common components or a component of the picture content more, frequently modified, you can independently out a component diagram, named after the component name, easy to manage
- If the site's global icon is more, you can consider the icon to do a separate sprite picture
- Suggest the icon to use a new tag to implement, rather than directly with the content of the tag to set the icon background, so you need to give the sprite icon and the icon to leave some space between, and encountered different row height, in order to make the icon background vertical Center, but also need to reset background-position, This implementation is bad for incorporating global styles
