0034 CSS sprites technology: sprite (focus)

5.1 Why do we need technical wizard

Here Insert Picture Description

Figure, when a user visits a Web site, you need to send a request to the server to request the schematic page, each image on the page to go through a request presented to the user.

However, one glance will often use a lot of the background image as a small modification, when the Web page image too much, the server will accept the request and sent frequently, which will greatly reduce the loading speed of the page.

Why do we need technical wizard:

In order to effectively reduce the number of servers to receive and send the request, the page load faster.

The emergence of CSS sprites technique (also known as CSS Sprites, CSS Sprite).

5.2 elves technical explanation

CSS sprites actually integrate some of the background image of a Web page into a large figure (sprite), however, each page element is usually required only a small sprite in view of different positions, in order to pinpoint the sprite a small figure.

Here Insert Picture Description

Thus, when a user visits the page, simply send a request to the service, the background image of the page to show all out.

We need to use the CSS

background-image、
background-repeat
BACKGROUND background-position attribute positioning,
One of the most critical property is the use of background-position accurately positioned.

The core technology used by the wizard summary 5.3

First of all we know, css sprites technology aimed to background images, inserted pictures img do not need this technology.

Accurate measurement of the size and position of each small background image.
When a small box to specify a background image, background positioning are basically negative .

5.4 Production sprite (understand)

CSS sprites actually integrate some of the background image of a Web page into a large figure (sprite), then we need to do is put a small drawing together such a large map.

In most cases, the sprite is a web art do.

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

Conclusion: small companies, the background picture a few cases, there is no need to use wizard technology, the maintenance cost is too high. If the background image is more, we can recommend the use of technology wizard.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            float: left;
            background: url(images/abcd.jpg) no-repeat;
        }
        .p {
            width: 92px;
            height: 108px;
            background-position: -497px -278px;
        }
        .i {
            width: 62px;
            height: 106px;
            background-position: -326px -142px;
        }
        .n {
            width: 112px;
            height: 113px;
            background-position: -255px -274px;
        }
        .k {
            width: 104px;
            height: 111px;
            background-position: -496px -142px;
        }
    </style>
</head>
<body>
    pink
    <div class="p"></div>
    <div class="i"></div>
    <div class="n"></div>
    <div class="k"></div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8pTrMCy-1576419566317)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20191215184154728.png)]$