Front-end engineer Skills Photoshop skillfully (from renderings to sprite) 5--theory

"CSS Sprite"

The "define" CSS Sprite is a Web page image application processing method that allows all the scattered images involved in a page to be included in a larger picture

Advantages
[1] reducing the number of HTTP requests
[2] Reduce the size of the picture, improve the load speed of the page (multiple pictures loading speed is less than the loading speed of the collage picture)

Disadvantages
[1] Increased development costs
[2] Increased maintenance costs

"Supplemental" (Browser has a limited number of concurrent network requests)
http1.1 (persistent) http1.0 (momentary hold)
IE6, 7 2 4
IE8 6 6
Firefox 6 6
Chrome 6 6

"Scenario": it can merge only pictures that are used for the background
[1] for Set pictures, can not be merged into a large map, if the merging of these images will affect the readability of the page, the semantic reduction and the scope of the adjustment is small.
[2] for horizontal and vertical are tiled picture, also cannot use CSS cprite, if is horizontal tile, can only merge all horizontal tile diagram into a large picture, can only vertical arrangement, cannot horizontal arrangement; if it is tiled vertically, we can only merge all the vertically tiled graphs into one large image, only horizontally and cannot be arranged vertically.

"Calculation Method"
[1] Because background-position represents the starting position of the picture, starting from the upper left corner, the x-axis right is positive, the y-axis is positive. Therefore, the general sprite values are negative
[2]background-position calculation refers to the offset from 0 to the top left of the picture.
[3]left: The left side of the background is aligned to the left side of the element; Right: the right side of the background graph; Center: middle alignment element in background

"Browser compatibility scheme": IE6 does not support PNG24 translucent
[1] Treatment Method 1
[A] Save a copy of Sprite.png to the Advanced browser 24
[b] Save a copy of the sprite_ie.png with a background cut for IE 8
[2] Treatment Method 2
[A] advanced browser with CSS3
[B] Low-level browsers use transduction +hack to handle
[3] Treatment Method 3: Graceful downgrade

"Precautions"
[1] An element has both a background image and background color, the background color must be written Background-color, if written background will overwrite the background image properties
[2] using the CSS Wizard to handle the icon must determine the size of small icons in advance, or later maintenance will be very troublesome

Front-end engineer Skills Photoshop skillfully used (from to sprite chart) 5--theory Chapter