On the principle of the CSS Sprite, use
CSS Sprite Description:
Use CSS Sprites can well reduce the number of http requests a page, which greatly improves the performance of the page, saving time and bandwidth.
CSS Sprites in domestic many people called css wizard, is a web application picture approach. It allows you to a page related to all sporadic images contain a large map to go, so that, when accessing the page, the picture will not be loaded as a piece of land slowly appear as before a. Required for the current popular network speed, not more than 200KB of single picture of the basic load time is about the same, so no scruples this problem.
The key acceleration, not to reduce the weight, but to reduce the number. Traditional drawing attention to fine cut, the smaller the better the picture size, weight the smaller the better, in fact, does not matter the size specifications, unified computer are by byte. Each client display picture will send a request to the server. So, the more pictures request more times, resulting in greater likelihood of delays.
CSS Sprites principle:
CSS Sprites in fact, the number of pages in the background image integrated into an image file, and then use the CSS "background-image", "background- repeat", "background-position" a combination of background positioning, background-position can be used digital can accurately locate the position of the background image.
CSS Sprites advantages:
Use CSS Sprites can well reduce the http requests a web page, which greatly improves the performance of the page, which is the biggest advantage of CSS Sprites, which is also the main reason for the wide dissemination and application;
CSS Sprites can reduce the image bytes, has repeatedly compared the three images into one image byte is always less than the sum of these three bytes of the picture.
Web designers solved the problem in the picture naming, just a collection of pictures Last name on it, do not need to be named for every little element, thereby improving the production efficiency of the web page.
Easy to change the style, just modify the picture on a less pictures color or style, the style of the entire page can be changed. Maintenance more convenient.
CSS Sprites Disadvantages:
Indeed CSS Sprites is so powerful, but there are some shortcomings can not be ignored
When the merger of the picture, multiple pictures you want an orderly and reasonable combined into one picture, but also good enough to stay in space, it does not appear to prevent unnecessary background in the sector; these Fortunately, most painful in widescreen, high-resolution adaptive page under the screen, if your picture is not wide enough, it is prone to fracture the background;
CSS Sprites too much trouble during development, you have to calculate the exact location of each unit by a background photoshop or other measuring tool, which is needlework, no difficulty, but it is cumbersome; fortunately Tencent ghost brother by RIA developed a CSS Sprites pattern generation tool, although there is still some flexibility on the use, but has come much more convenient than measuring photoshop, and styles directly generate, duplicate, copy it OK!
CSS Sprites too much trouble at the time of maintenance, if the page background there is a little change, you must change the general picture of this merger, without having to change places best not to move, so avoid change more css, if not put in the same place , but only (best) plus down the picture, so the picture byte has increased, but also to change css.
CSS Sprites is worth learning and application, in particular page has a bunch ico (icon). In short many times we have to weigh the pros and cons, and then decide whether to use CSS Sprites.
CSS Sprites Image excision
1. CSS Sprites picture sequence together pictures from top to bottom, left to right added. Usually the background-position combination digital positioning, so that maintenance can be reduced to bring unnecessary troubles.
2. Not recommended to keep a certain distance CSS Sprites pictures, because the file size increases with increase in file size.
3. CSS Sprites image in the same color combination or close together can reduce the number of colors, because the image file size less color number will be relatively small.
CSS Sprites same picture 4. size leave large gaps in, in most cases a certain extent, will increase the size, so CSS Sprites pictures do not have a gap.
5. In the same picture size CSS Sprites, vertically aligned image file size will be larger than a horizontal alignment.
6. CSS Sprites image, the image file size will be horizontally aligned are arranged to be larger than the vertical.
7. Image merger of: applying CSS Sprites images, suitably of the same image and the like were combined and reduced in volume to save space.
8. The combined image does not need to be distinguished: If the current user is determined when one state or display only one level, the necessary level or status of other pictures combined.
9. Gold cleavage: the far right or left of CSS Sprites pictures of the most spiritual activity most appropriate location icon placed before the text, so CSS Sprites images will not be other interventions do not need to reserve a certain line width.
10. Some said bottom or right and so avoid the use of positioning, when using the CSS sprite, only background-position: bottom -300px or background-position: right -200px; very easy. This is just the beginning when it is feasible, but the problem is that when you expand the relevant sprite image in the width or height, location of the original settings may be wrong, because the picture is no longer Sprite or bottom right part of the picture a. Use the exact location to avoid this problem.
In fact, I feel normal circumstances will not change the width of the drawing sheet without strain, with RIGHT and LEFT is very convenient, but the overall consideration, upgrade. Revision. Image width is likely to change. After all, doing too wide no good at the beginning, we are wasting a lot of space. That is, a little extra time to coordinate better to do RIGHT and LEIFT of the.
11. Some went so far as to say that each picture is enough space just like you see in the picture at the top of this instance, those little pictures have been set aside enough space. Why not put them stuffed into a sprite image to make it smaller? Because the use of these picture elements usually have a lot of content and may need to extend the distance that other pictures will not be unexpected.
The benefits of using CSS Sprite?
CSS Sprites (picture integration technology) purpose is through the integration of images, reducing the number of requests to the server, thus speeding up page load speed. As shown below:
How to make?
The basic principle is to use negative background-postion to be adjusted.
I found the picture to the left, move, and also to the upper left corner of the center DIV Figure 50PX moved to the left, also moving up the 50PX time; -50px -50px: when we are located in the background-position.
Reference point: The picture for the (0,0) origin.
The positioning of the background image taken graph problems
We know when to use the picture as a background, css to write to div container, for example child may be background body, td, p, etc., the same reason.
Code:
div{ background:#FFF url(image) no-repeat fixed x y;}
Here's the background property values were as follows:
#FFF background color :( color value, where the background image when not covered, or not show background image background color)
image background image :( here is the address of the picture)
Whether no-repeat :( repeating image is smaller than the container size, default images repeatedly arranged to fill the container, no-repeat expressed not repeated, only this time using only location coordinates later.)
fixed background rolling over whether :( container has two optional values, scroll rolling, rolling is not fixed, the default is to scroll)
xy positioning of the background image :( note that only makes sense to locate in the no-repeat. This is the focus of talk today)
Background image positioning, we have to clear a few points:
1, two values a front transverse orientation, we called the x-axis direction positioning. A value is longitudinally positioned behind, we call y-axis direction positioning. If only one value, that is the default x-axis direction, y-axis direction at this time it is the default vertically centered, i.e. center.
2, coordinate axes corresponding to left is the apex of the container.
3, y-axis coordinates of the downward pointing arrow, i.e. the value of the lower right (inside the container) are XY is only positive.
4, xy left vertex values represent the values of the background image with respect to the coordinate origin (i.e. left vertex of the container) of.
5, the value of xy may be represented by a percentage or px.
6, xy can also use the "left, right, top, bottom, center" to represent the five alignment, but note: The "left, right, top, bottom, center" to indicate when the application is alignment rules instead coordinate rules. x is left and left is left of the picture container aligned to the right when the right of representation and the right picture of its container, y is represented at the top when the top of the container and the top of the picture alignment, represent an image with the bottom of align bottom and the bottom of the container, xy is equal to the time is centered, center.
7, xy percentage or px represents the time, which can be negative values. We coordinate the application above it is easy to understand the meaning of the rules of negative numbers, x is negative when the left picture represents the apex of the left side of the left apex of the container, represents the picture when y is negative at the apex of the left container left point. I.e. leftward and upward beyond the scope of the container.
Add that if positioning is the percentage, then the algorithm is rather special. Let me give you an example:
Code:
background:#FFF url(image) no-repeat fixed 50% -30%;
This time picture of what should be in the position of the container does, the algorithm formula is as follows:
Picture top left coordinate position point from the apex of the left container
X :( width of the container - the width of the picture) x50%
y :( height of the container - the height of the picture) x (-30%)
The results obtained applying a coordinate law, if the difference is negative, then the percentage of positive result of the operation is negative. If the difference is negative, the percentage is also negative, then the calculation result is positive. All in all this is in line with the operational algorithms. The result of the operation of the law can get into the position coordinates of the image.
For example: container is width: 600px; height: 600px; while the picture is width: 200px; height: 200px;
We use the above style, you can get the picture location:
x：(600px-200px)*50%
and: (600px-200px) * (- 30%)
