Examples of csssprite

CSS Sprite is a CSS Sprite. It is often interpreted as "CSS image splicing" or "CSS texture positioning ". This article introduces the usage and basic instances of csssprite to coders. For more information about coders, see. I. What is css sprites?

Css sprites.CSS genie. It is often interpreted as"CSS Image Combination"Or"CSS texture Positioning". In fact, it is to combine multiple images into one image, and then layout the webpage background using CSS background locating techniques. The benefits of doing so are also obvious, because if there are too many images, http requests will be added, which will undoubtedly lead to reduced website performance, especially for websites with a particularly large number of images, if you can use css sprites to reduce the number of images, it will increase the speed.

Css sprites:CSS Sprites is actually integrating some background images in the webpageMerging an imageAnd then use the combination of CSS "background-image", "background-repeat", and "background-position" to locate the background, background-position can be used to precisely locate the position of the background image in the layout box object.

Ii. Suitable for combination with unsuitable CSS sprites Layout

1. Suitable: small icon Materials

Small icon ico material. Generally, the width and height of icons are smaller than 10 pixels and dozens of pixels. This is suitable for merging a picture to realize the layout of sprites background positioning. When loading Web pages, the number of http iis links will be instantly consumed, but will be released soon after loading.

2. Not Suitable: large image background

A large background is generally used for webpage backgrounds. When the background is set to a webpage background, all backgrounds are displayed. Splicing a large image increases the image size. Visitors with poor network bandwidth are not recommended to splice a large image to use the css sprites background to locate the layout because the loading of large background images is slower.

3. sprites suitable for recommendation

Generally, this sprites combination layout is used for the layout of small boxes. It is not suitable for the layout of large backgrounds and large backgrounds. For example, small local layout, small icon background, small navigation background, and other CSS layout.

Iii. Selection of css sprites advantages and disadvantages

1. sprites advantages:

After several small icons are combined into a diagram, the layout reduces the number of http iis requests. For large-traffic websites, the invisible advantage is obvious, which implicitly improves the website performance. For large-traffic websites, the number of http requests is precious. Using CSS Sprites can greatly improve the page performance, which is the biggest advantage of CSS Sprites, it is also the main reason for its widespread spread and application, while also reducing the number of image files.

2. disadvantages of sprites

When merging images, You need to combine multiple images into one image in an orderly and reasonable manner, and leave enough space to avoid unnecessary background in the Section, if it is not suitable to leave a blank box or splice a location, it is easy to splice adjacent images in the background when layout the box object;

CSS Sprites is troublesome during development. You need to use photoshop (PS) or other tools to measure and calculate the exact location of each background unit. This is a sewing task, which is not difficult, but complicated;

CSS Sprites is troublesome during maintenance. sprites is a double-edged sword. If there is a slight modification to the page background, it is generally necessary to change the merged image. It is best not to change the image, in this way, you can avoid modifying more css. If you can't put the image in the original place, you can only (preferably) Add the image to the next step, so that the bytes of the image will increase, it is a little tedious to delete or add content to an image every time you change the image. It is also unpleasant to recalculate the position of the image (especially the thousands of px images ).

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

3. Recommendation Summary

This is because splicing images requires some experience and skills (you can quickly grasp them by practice), measuring and locating values, and modifying images that are not so flexible, CSS Sprites is not recommended for small websites, small-traffic websites, and general enterprise websites, because it takes time and effort to use CSS Sprites to layout a single background image, therefore, we do not recommend small sites. However, the purpose of this layout technique is to learn how to master the flexible layout. The combination of the rich Number of HTTP requests on the small site does not have any advantage, but will waste valuable time. On the contrary, large-traffic websites are recommended for use, which is worthwhile.

Iv. Examples of css sprites instances

1. Materials and Effects

2. Introduction to sprites instance tutorial

First, these icon materials are placed on the same image (PS concatenation), and then implemented into a list layout, each of which is different from the previous icons. Use css sprites to implement this layout (actually implemented using the background style ).

First, we use the ul li list layout for the list layout. Each li station occupies a line of layout, and the padding is set for ul to achieve a certain margin between the surrounding content and the border, because each li front icon is different, however, this background image is combined on an image. Therefore, the span label is used in li to implement different icon effects. Different icons set different classes for span to distinguish span, corresponding icons for different class settings.

3. instance tutorial preparation

1) Use of the initialization template: in order to be compatible with various browsers, we still use the website to provide the initialization template. Based on this template, we modify the settings to conform to the CSS style of this instance.
A 2-digit graphic material is directly used to create a picture, and the name is icoico.png. For example, you can save it as a document.

4. layout the effect first, and then set different background icon styles in css sprites.

Html code:

  
  
 
   
WORD article title
 
   
PPT content title
 
   
Excel content title
 
   
PDF content title
 
   
Text Document title
 
  
 

Add different classes to span for different effects.

Css code:

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

Key codes and explanations of css sprites

First, introduce background information to ul. Sprites li span.
Ul. Sprites li span {background: url(ico.png) no-repeat} sets a css background image for span.
Then, the specific values of the icon background are set for different span classes respectively.
Ul. sprites li span. a1 {background-position:-62px-32px}: Set the background image as the background of the corresponding box object and drag 62px to the left to display the background icon.
Ul. sprites li span. a2 {background-position:-86px-32px}: Set the background image as the background of the corresponding box object and drag 86px to the left to display the background icon.
Ul. sprites li span. a3 {background-position:-110px-32px}: Set the background image as the background of the corresponding box object and drag 110px to the left to display the background icon.
Ul. sprites li span. a4 {background-position:-133px-32px}: Set the background image as the background of the corresponding box object and then drag 133px to the left to display the background icon.
Ul. sprites li span. a5 {background-position:-158px-32px}: Set the background image as the background of the corresponding box object, drag 158px to the left, and drag up 32px to display the background icon.

Key:The background-position has two values. The first value indicates the left distance (positive or negative), and the second value indicates the top distance (positive or negative)
The background-position value can be positive or negative. When the value is positive, it indicates that the background image starts to show the background image based on the left and the distance it was taken as the background image of the object; when it is a negative number, the background image of the table is used as the background image of the box object. Drag the background image beyond the left of the box object to show the background image.

CSS sprites Technical Summary

CSS sprites is actually an extension of the CSS background style. In the past, the background-position was set to a common positive value. After the background is set to a negative value, it is the number of pixels on the left to show the image. Download this case and modify the value multiple times. Observe and observe that the regular pattern will soon be used as this technique, learn the PS slicing tool to get the distance value.