Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use Sprite sprite in CSS" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope this "how to use Sprite sprite in CSS" article can help you solve the problem.

The use scene of Sprite

Static pictures do not change with the change of user information.

Small picture, the capacity is relatively small (2mm 3k).

The amount of picture loading is relatively large.

Purpose

Reduce the number of Http requests and speed up the display of content. Because each time a request is made, a link is established with the server, and it takes extra time to establish a link.

Use

Before using sprite, we need to know the location of each icon in the sprite.

From the picture above, it is not difficult to see that the small icons (icon) in the sprite image are at the beginning of the whole sprite image. For example, the first icon (skirt) in the sprite image starts with x _ () ~ 0, the second icon (shoes) starts with x _ (RX) ~ (th), and the third icon (football) starts with x _ (RB) _ 0 and 100px. The starting position of each picture relative to the sprite image can be obtained by analogy.

Take the sprite image above as an example (the starting position of each small image in the actual sprite image is different from that shown above) use a Demo to illustrate how to use it.

HTML

Clothing, underwear, shoes, bags, accessories, sports, outdoor jewelry, watches, mobile phones, digital home appliances, office skin care, make-up, mother and baby products

CSS

Ul li {list-style: none; margin: 0; padding: 0;} a {color: # 333; text-decoration: none;}. Sidebar {width: 150px; border: 1px solid # ddd; background: # f8f8f8; padding: 010px; margin: 50px auto;}. Sidebar li {border-bottom: 1px solid # eee; height: 40px; line-height: 40px; text-align: center Sidebar li a {font-size: 18px;}. Sidebar li a:hover {color: # e91e63;}. Sidebar li. Spr-icon {display: block; float: left; height: 24px; width: 30px; background: url (css-sprite.jpg) no-repeat; margin: 8px 0px;} .sidebar li .icon2 {background-position: 0px-24px;} .sidebar li .icon3 {background-position: 0px-48px;} .sidebar li .icon4 {background-position: 0px-72px } .sidebar li .icon5 {background-position: 0px-96px;} .sidebar li .icon6 {background-position: 0px-120px;} .sidebar li .icon7 {background-position: 0px-144px;} .sidebar li .icon8 {background-position: 0px-168px;}

Why the background-position attribute value is negative when using sprite.

The above example has illustrated how to use a sprite image, but beginners may be confused about the negative value of the background-position property in the sprite image. In fact, this question is not difficult to answer, if careful people should have discovered the root of the use of negative numbers a long time ago. Here we use the above Demo as an example to analyze this problem. The span tag above is a container of 24*30px length and width. When using the background image, the initial position of the background image will cover the entire container from the upper left corner of the container. However, the size of the container limits the size of the background image, and the part beyond the container is hidden. If you set background-position: 0, it means that the position of the background image relative to the container (span tag) x axis = 0 × y axis = 0 is used as the starting position of the background image to display the picture. So if you need to display the second icon in the container, it means that the x-axis direction of the sprite image should be moved to the left, that is, the value of the sprite image will be set to a negative number, and the same is true of the y-axis direction.

Make

PS manual jigsaw puzzle

Automatically generate (CssGaga or CssSprite.exe) using the Sprite tool

Advantages and disadvantages of Sprite

Advantages:

1. Speed up the loading of web pages

For every picture on the web page, you have to ask the browser to download the picture, and the browser accepts 10 requests at the same time, and the number of requests that can be processed at a time is two.

two。 Easy maintenance in the later stage

The tool can directly select the picture to carry on the picture stitching, of course, you can also move the picture inside, layout your Sprite image yourself, and just change the position of the picture when changing the picture. Generate code directly, easy to use.

3. CSS Sprites can reduce the bytes of pictures. It has been compared many times that the bytes of 3 pictures merged into one picture are always less than the sum of the bytes of these three pictures.

4. Solve the problem of the web designer in the picture naming, just name the picture of a collection, and there is no need to name every small element, so as to improve the efficiency of web page production.

5, change the style is convenient, only need to change the color or style of the picture on one or fewer pictures, the style of the whole page can be changed. It is more convenient to maintain.

Disadvantages:

When merging pictures, you should merge multiple pictures into a single picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary backgrounds in the plate; fortunately, the most painful thing is in the wide screen, the adaptive page under the high-resolution screen, if your picture is not wide enough, it is easy to break the background.

As for maintainability, this is a general double-edged sword. Some people may like it and some don't, because every change to the picture has to delete or add content to the picture, which is a little cumbersome. And calculating the location of the picture (especially the picture of thousands of px) is also a rather unpleasant thing. Of course, under the slogan of performance, these can be overcome.

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

CSS Sprites can only be used in fixed-size boxes (box) so that it can cover the parts that should not be seen. That is to say, CSS Sprites is not appropriate in situations that require a non-one-way tiled background and page scaling.

This is the end of the introduction to "how to use Sprite sprite in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.