Day_11

Use the sprite

　　Spirit, sprite, also known as Sprite usage graph: too many requests to solve the problem server.

　　Now the network faster and faster, speed is not the first factor people need to consider, while the large number of requests and brought the server is to bring a lot of load, appear Spirit is to solve When the page request scheme large background images appear. Among the pages when there are a lot of pictures, each taking a piecemeal picture Bianxiang server resource requests once, which will undoubtedly continue to increase the load on the server, so how will a lot of disposable loading pictures into the page, is that we solve the problem one program. So the key Spirit is to integrate a large and fragmented picture to a picture into the specific method is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            display: inline-block;
            background: url("img/img.jpg") no-repeat;
            vertical-align: middle;
        }
        .w {
            background-position: -115px bottom;
            width: 138px;
            height: 115px;
        }
        .h {
            background-position: -216px -140px;
            width: 108px;
            height: 109px;
        }
        .o {
            background-position: -369px -275px;
            width: 114px;
            height: 113px;
        }
        .n {
            background-position: -251px -273px;
            width: 117px;
            height: 117px;
        }
        .e {
            background-position: -480px -5px;
            width: 101px;
            height: 112px;
        }

    </style>
</head>
<body>
    <div>
        <span class="w"></span>
        <span class="h"></span>
        <span class="o"></span>
        <span class="n"></span>
        <span class="e"></span>
        <span class="n"></span>
        <span class="o"></span>
        <span class="w"></span>
    </div>
</body>
</html>

　　The following diagram is used to locate a picture

　　The following are the results achieved

　　As shown in the code, the key is the positioning of the sprite picture, how to find what they want that picture on a piece of the big picture in the method of the sprite is achieved.

　　Tomorrow to continue to learn reptiles, have learned before in this area, but only learned that they put down. Never-ending journey of learning, I hope we did not forget the early heart.

Guess you like