What is a CSS Sprite? I do not know if you are in the Yahoo.com Web page to notice, Yahoo in the page production technology and most of the site is not the same, they put on the page ICON, column background ah, picture button AH and so there will be a regular merger of a background map, Then use the background-position to achieve the background image positioning, why they spend some time to merge these CSS background images, CSS in the use of a background map to do page technology in the end what advantages?usually we call it CSS image flattening technology, and of course some people call CSS sprites "CSS map positioning". What are the benefits of using CSS sprites? The goal of CSS Sprites (Image integration technology) is to speed up page loading by consolidating images to reduce the number of requests to the server. As shown in the following:
Implementation method:
- First, the small picture is integrated into a large picture
- Then, depending on the position of the specific icon on the large map, position the background. background-position:-8px-95px;
Picture Optimization
First, for non-animated GIF is recommended to use PNG8 because it can also achieve the same effect, but also can save you 10%-30% of the file volume.
Second, Photoshop compared to fireworks, export the same quality PNG image, the volume will be slightly larger. Although fireworks did the corresponding compression optimization, but did not achieve the best compression.
Third, I know that the design of software, for the processing of PNG pictures did not achieve the best compression, picture volume and a certain amount of compression space. You can try using the Image optimization tool described below for lossless compression optimizations.
Four, the volume and size of the picture, the proposed volume is kept within 100K (more in line with the country's best request size), size 800px (the best size).
CSS sprites picture cutting technique
Third, the CSS sprites pictures in the color of the closer or the same combination can reduce the number of colors, because the image of a few color number of the file size will be relatively small.
Four, the size of the same CSS sprites picture left a large gap, to some extent, most of the situation will increase the volume, so the CSS sprites pictures do not have gaps.
Five, in the same size CSS sprites picture, vertically arranged pictures will be larger than the horizontal arrangement of the file size.
Six, in the CSS sprites picture, the horizontal arrangement picture will be larger than the vertical arrangement file volume.
Nine, the gold cutting bit: In the CSS sprites picture of the right or left for the most flexible position of the most suitable to put the text before the icon, so will not be affected by other CSS sprites picture intervention, do not need to reserve a certain line width.The following are Apple's applicationsHow to make? The basic principle is to usebackground-postion negative values to adjust. When we are positioned in background-position:-50px-50px;when the picture is found to the left, moving, the top left corner of the div is centered, the figure moved to the left 50PX, right also moved 50PX.
reference point: Take the picture as the origin (0,0).
positioning as a piece >>>> Use the Fireworks tool to locate the picture. code Example
Background-position: -396px-116px;
Application of CSS Sprite "Go"
