Shulou(Shulou.com)06/03 Report--

How to use css sprite, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Css sprite literally translates to CSS genie. It is usually interpreted as "CSS image flattening" or "CSS map positioning".

What is css sprites

Css sprites literally translates to CSS genie. It is usually interpreted as "CSS image flattening" or "CSS map positioning". In fact, it is through the fusion of multiple pictures into a picture, and then through the CSS background background positioning technology to layout the background of the web page. The benefits are also obvious, because more pictures will increase the number of http requests, which will undoubtedly lead to a decline in the performance of the site, especially for websites with a lot of pictures, if you can use csssprites to reduce the number of pictures, it will bring an increase in speed.

Css sprites is what popular explanation: CSS Sprites is actually some background images in the web page integrated into a picture, and then use CSS's "background-image", "background- repeat", "background-position" combination of background positioning, background-position can use numbers to accurately locate the background picture in the layout of the box object location.

2. Suitable or not suitable for CSS sprites flattening layout

1. Suitable for: general small icon material

Small icons ico material, general icons are very small more than ten pixels dozens of pixels width and height, this is suitable for flattening into a picture to achieve sprites background background positioning layout. Too much http iis will instantly consume some ICO links when a web page is loaded naturally, but it will be released soon after loading.

2. Not suitable for: big picture and big background

The large background is generally used for the web background, and when flattening, all the backgrounds will be displayed when it is set to the web background. Large image stitching will increase the image size. Visitors with poor network bandwidth are not recommended to use css sprites background stitching to locate the layout due to the slow loading of large files in the background image.

3. Sprites is suitable for recommendation

Generally speaking, this sprites flattening layout for local small box layout is not suitable for large background and large layout background. For example, small local layout, small icon background, small navigation background and other CSS layout.

III. Judgment and selection of advantages and disadvantages of css sprites

1. Sprites advantages:

Several small icons are spliced into a picture after the layout, reducing the number of http iis requests, for the war against large traffic sites, the invisible advantage is obvious, thus invisibly improving the performance of the site. For high-traffic websites, the number of http requests is more precious, the use of CSS Sprites can greatly improve the performance of the page, which is the biggest advantage of CSS Sprites, but also the main reason why it is widely spread and applied, but also reduce the number of picture files.

2. Shortcomings of sprites

When merging pictures, you should merge multiple pictures into one picture in an orderly and reasonable manner, and leave only enough space to prevent unnecessary background in the plate, if the space or flattening position is not suitable, when it is easy to lay out the box object in the layout, set the background to flatten the adjacent pictures and interfere with the pictures.

CSS Sprites is troublesome when developing. You have to measure and calculate the exact location of each background unit through photoshop (PS) or other tools. This is needlework, not difficult, but tedious.

CSS Sprites is troublesome in maintenance. Sprites is a general double-edged sword. If there is a slight change in the background of the page, it is generally necessary to change the merged picture, and it is best not to move where there is no need to change, so as to avoid changing more css. If you can't put it in the original place, you can only (best) add pictures down, so that the bytes of the picture will increase, because every change to the picture will have to delete or add content to the picture. It is a little tedious, and it is also quite unpleasant to recalculate the position of the picture (especially this kind of picture of thousands of px).

Because the position of the image needs to be fixed to an absolute value, this loses flexibility such as center.

3. Summary of recommendation

As stitching images require some experience and skills (you can quickly grasp it in practice), measuring positioning values, modification is not so flexible and other reasons, generally small websites, small traffic sites, general corporate websites are not recommended to use CSS Sprites, because using CSS Sprites will take more time and energy than ordinary single background image layout, so it is not very recommended. But this layout skill must also learn to master flexible layout is the goal. The splicing of a large number of HTTP requests on a small site actually does not give rise to any advantage but will waste valuable time. On the contrary, large websites with large traffic are recommended, which is more worthwhile.

IV. Css sprites example tutorial

1. Screenshot of material and effect to be achieved

2. Introduction to sprites example tutorial explanation

First of all, these icon materials are placed on the same picture (PS flattening), and then implemented into a list class layout, each of the front icons of the list is different. Use css sprites to implement this layout (actually using the background style).

First of all, this list layout we use ul li list layout, each li station line layout, set padding to ul to achieve the effect of a certain distance between the content and the border, because the icon in front of each li is different, but the background picture is pieced together on a picture, so here to do li start to use span tag to achieve this different icon effect, each icon is different in order to distinguish span, so set different class to span Different class corresponding settings locate the corresponding icon.

3. Preparation of example tutorial

1) use of initialization template: in order to be compatible with major browsers, an initialization template is still provided on the website. Based on this template, the settings are modified to conform to the CSS style of this example.

2), icon material, here directly to provide you with a stitched icon material picture, named "ico.png", such as the following picture, can be directly saved for use.

4. Layout the effect first, and then set different background icon styles by css sprites.

Html Code:

XML/HTML Code copies content to the clipboard

WORD article title PPT content title Excel content title PDF content title text document title

In order to distinguish different effects, add different class to span.

Css Code:

XML/HTML Code copies content to the clipboard

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

Effect screenshot

Key codes and interpretations of css sprites

First introduce the background to ul.Sprites li span

Ul.Sprites li span {background:url (ico.png) no-repeat} sets the css background image for span.

Then locate the specific values for the icon background for different span class settings

Ul.Sprites li span.a1 {background-position:-62px-32px} set the background picture as the background of the corresponding box object, then "drag" 62px to the left, and "drag" 32px up to display the background icon.

Ul.Sprites li span.a2 {background-position:-86px-32px} set the background picture as the background of the corresponding box object, then "drag" 86px to the left, and "drag" 32px up to display the background icon.

Ul.Sprites li span.a3 {background-position:-110px-32px} set the background picture as the background of the corresponding box object, then "drag" 110px to the left, and "drag" 32px up to display the background icon.

Ul.Sprites li span.a4 {background-position:-133px-32px} set the background picture as the background of the corresponding box object, then "drag" 133px to the left, and "drag" 32px up to display the background icon.

Ul.Sprites li span.a5 {background-position:-158px-32px} set the background picture as the background of the corresponding box object, then "drag" 158px to the left, and "drag" 32px up to display the background icon.

Key: background background-position has two values, the first one represents the left distance value (can be positive or negative), and the second value represents the upper distance value (positive or negative)

Background background-position has two values that can be positive or negative, when it is positive, it represents the background picture as an object box background picture, and when it is negative, it represents a background picture as a box object background picture, dragging the background picture beyond the left side of the box object, and dragging beyond the top of the box object to start displaying the background picture.

Summary of CSS sprites skills and techniques

CSS sprites is actually the CSS background background style expansion application, previously set the background background-position is commonly seen as a positive value, set the background on the left to the upper distance of how many pixels to start displaying the picture, download this case to modify the value many times, observe and observe the law can be found quickly as this skill, while learning the PS slice tool to obtain the distance value.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.