DIV CSS Sprites sprite CSS image mosaic CSS background map positioning tutorial case

Div CSS Sprites sprite-css image flattening CSS map positioning Web Background Footage picture flattening positioning layout Technology tutorial and CSS Sprites example chapter

CSS Sprites flattening background image footage for layout effects

first, What is CSS sprites-TOP

CSS sprites literal translation is the CSS Wizard . This is often interpreted as "CSS image flattening " or "CSS mapping positioning ". In fact, it is through the integration of multiple images into a picture, and then through the CSS background background positioning Technology Skills Layout page Background. The advantages of this is also obvious, because more pictures, will increase the HTTP request, undoubtedly prompted the performance of the site, especially the image of the site, if you can use CSS sprites reduce the number of pictures, will bring the speed of Ascension.

What is the popular explanation for CSS Sprites: CSS sprites is actually the page in the integration of some background image into a picture , and then use the div css "background-image", "background-repeat", " Background-position "combination of background positioning, background-position can be used to accurately locate the background image in the Layout box object Position.

second, fit and not fit div CSS Sprites flattening layout-TOP

1, suitable for: general small icon material
Small icon ico class footage, general icons very small 10 pixels dozens of pixels width height, This fit to flatten into a picture to achieve sprites background background positioning Layout. Multiple ico too much naturally loading a webpage instantly consumes a few HTTP IIS links, but it will be released shortly after Loading.

2, not suitable: big picture big background
The background is generally used for web pages, and when flattened, all backgrounds are displayed when set to a Web page background. Large image stitching will increase the size of the image, network bandwidth is poor visitors to the large file due to the background map loading slightly slower, so the large map is not recommended splicing to use CSS sprites background positioning Layout.

3, Sprites Suitable recommendation summary
Generally this sprites flattening layout is used for local small box layouts that are not suitable for large background large layout backgrounds. such as small local layout small icon background, Small navigation background, such as Divcss Layout.

third, the div CSS sprites advantages and disadvantages of the choice of judgment-TOP

1, Sprites Advantages:
Several small icons are flattened into a post-graph layout, reducing the number of HTTP IIS requests, which is obvious to the big-traffic Web site, thereby cloaking the Site's performance. For the large-traffic site, the number of HTTP requests is more valuable, using div+css sprites This can greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason, but also reduce the number of picture Files.

2, Sprites shortcomings
In the picture merger, you want to put more than one picture in an orderly and reasonable combination into a picture, but also to leave a good enough space, to prevent the plate does not appear in the unnecessary background, if the space or flattened position is not appropriate, in the layout is prone to layout this box object, set the background to appear flattened adjacent pictures, interference picture situation;

CSS sprites in the development of the trouble, you have to use Photoshop (PS) or other tools to measure the precise location of each background unit, this is needlework, no difficulty, but very cumbersome;

CSS sprites in the maintenance of trouble, sprites is a general double-edged sword, if the page background has a little change, generally want to change this merged picture, do not need to change the place best not move, so avoid changing more css, if in the original place, there can only (best) add pictures, This increases the number of bytes in the picture, because every time the picture changes to the image to delete or add content, it seems a little cumbersome, and re-calculate the location of the picture (especially the thousands of PX Diagram) is a rather uncomfortable thing

Because the position of the picture needs to be fixed to an absolute value, the flexibility such as center is Lost.

3, DIVCSS5 Recommended Summary
Hesitation Stitching pictures need some experience skills (to do the practice can be quickly mastered), measurement positioning values, Modification is not so flexible, such as the general small site, small traffic sites, general corporate website is not recommended to use CSS Sprites, because the use of CSS Sprites is more time-consuming and energy-intensive than a single background picture layout, so it's not Recommended. But this layout technique also has to learn to master the flexible layout is the Purpose. Small station HTTP requests rich this stitching actually does not come up with what advantages instead of wasting valuable time. On the contrary Big website Big traffic website recommend use, This is worth More.

four, Div CSS Sprites example tutorial-TOP

1, material and to achieve the effect

Split ICO icon footage implementation list different icon effect

2, Sprites Example Tutorial explanation introduction
first, The icon footage is placed on the same picture (ps Flattening) and then implemented into a list class layout, with a different list of front icons. Use the div CSS sprites to implement this layout (actually implemented using the background style).

First this list layout we use the UL Li list layout, each Li station line layout, the UL set padding achieve four weeks content and border a certain spacing effect, because each Li front icon is different, but this background picture is flattened on a picture, So here do Li to start using the span tag to achieve this different icon effect, each icon is different in order to distinguish the span so that the span set different class, different class corresponding settings to locate the corresponding Icon.

3. Sample Tutorial Preparation
1), initialization Template use: in order to be compatible with the major browsers, still use DIVCSS5 here to provide the initialization template, the template based on the modification of the settings conform to this instance CSS Style.
2), icon material, here directly for everyone to provide a good picture of the image mosaic, named "ico.png", such as, can be saved directly to save Use.

Sprites case Picture material (directly Click the picture right mouse button can save as saved Use)

4, first layout out the effect, then CSS sprites set different background icon style
1), Key HTML code:

2. <ul class="Sprites">
4.     <li> <span class= "a1" ></span< Span class= "tag" >><a href= "#" >word article title </a></li> 
6.     <li>< Span class= "tag" ><span class= "a2" ></span< Span class= "tag" >><a href= "#" >ppt content title </a ></li> 
8.     <li> <span class= "a3" ></span< Span class= "tag" >><a href= "#" >excel content title </a></li> 
10.     <li>< Span class= "tag" ><span class= "a4" ></span< Span class= "tag" >><a href= "#" >pdf content title </a ></li> 
12. <li><span class="a5"></span><a href="#"> Text Document title </a></li>
14. </ul>

To distinguish different effects, add different classes to the Span.
2), Key CSS Code

1. Ul. sprites{margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
2. Ul. Sprites li{height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
3. Ul. Sprites Li span{float:left; width:17px;padding-top:5px;height:17px;
4. Overflow:hidden;background:url (ico.png) no-repeat}
5. Ul. Sprites Li a{padding-left:5px}

3), effect

Not using sprites technology to introduce background picture effects

4), use CSS sprites to set the location of the background of the full key CSS code

2. Ul. sprites{margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
4. Ul. Sprites li{height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
6. Ul. Sprites Li span{float:left; width:17px;padding-top:5px;height:17px;
8. Overflow:hidden;background:url (ico.png) no-repeat}
10. Ul. Sprites Li a{padding-left:5px}
12. Ul. Sprites Li Span.a1{background-position: -62px-32px}
14. Ul. Sprites Li Span.a2{background-position: -86px-32px}
16. Ul. Sprites Li Span.a3{background-position: -110px-32px}
18. Ul. Sprites Li Span.a4{background-position: -133px-32px}
20. Ul. Sprites Li Span.a5{background-position: -158px-32px}

Finally implement the browser effect test

div CSS Sprites Case effect

5), CSS Sprites key code and explanation

1. Ul. Sprites Li Span.a1{background-position: -62px-32px}
2. Ul. Sprites Li Span.a2{background-position: -86px-32px}
3. Ul. Sprites Li Span.a3{background-position: -110px-32px}
4. Ul. Sprites Li Span.a4{background-position: -133px-32px}
5. Ul. Sprites Li Span.a5{background-position: -158px-32px}

First to Ul. Sprites Li Span Introduction background
Ul. Sprites Li Span{background:url (ico.png) no-repeat} sets the CSS background picture for Span.
Set the specific values for the icon background for each span class
Ul. Sprites Li Span.a1{background-position: -62px-32px} set the background image as the corresponding box object background after the left "drag" 62px, up "drag" 32px start to show this background icon
Ul. Sprites Li Span.a2{background-position: -86px-32px} set the background image as the corresponding box object background after the left "drag" 86px, up "drag" 32px start to show this background icon
Ul. Sprites Li Span.a3{background-position: -110px-32px} set the background image as the corresponding box object background after the left "drag" 110px, up "drag" 32px start to show this background icon
Ul. Sprites Li Span.a4{background-position: -133px-32px} set the background image as the corresponding box object background after the left "drag" 133px, up "drag" 32px start to show this background icon
Ul. Sprites Li Span.a5{background-position: -158px-32px} set the background image as the corresponding box object background after the left "drag" 158px, up "drag" 32px start to show this background icon

key: The background background-position has two values, the previous one represents the left distance value (can be positive negative), The second value represents the upper distance value (can be positive negative)
Background background-position has two values can be positive can be negative, when a positive number, representing the background picture as the object box background picture when the left and how much distance to enter how much to start displaying the background picture; when negative, the background image is the background image of the box Object. Drag the background picture beyond the left side of the box object, and drag beyond the top of the box object to start displaying this background picture.

6), background image positioning numerical access
Drag to the left and drag up these ps to get a graphics tutorial

Use the slice tool to get the position of the corresponding small icon in the picture file

Through the PS software using the slicing tool to display the image area, double-click to pop up "slice detail card", You can get x (left distance value), Y (up to the distance value) to get the corresponding picture material in the large image Position.

five, online style and download-TOP

1. Online Style

View case

2. Package Download

Download Now (5.969KB)

six, DIV CSS Sprites Tips Technical summary-TOP

CSS sprites is actually the CSS background background style extension application, previously set the background background-position common as positive values, set the background on the left to the top distance how many pixels start to display pictures, negative values, is to drag the picture from the top of the left side how many pixels start to display the picture, download this case to modify the number of changes several times, observe observation can find the law quickly as this technique, and learn the PS slicing tool to get the distance Value.

DIV CSS Sprites sprite CSS image mosaic CSS background map positioning tutorial case