Sprite showing the action

First Why use Sprite plans to make the button:

To the user experience of a button often set two to three kinds of different presentation Hover: When the mouse into the state. Active: When the mouse to click on the button when the state.

After doing function you will find pictures have a very quick flashes for a perfect front-end engineers that can not be tolerated after the click of a button! Since the implementation hover and active blinking can cause a transient blank

To solve this problem root cause we have to find where the problem is we need to understand the problem:

Background image in the form of external resources loading into the web page, the browser loads an external resource often need to send a separate request, but our external file is not loaded at the same time, the browser will go to load when resources are used and cache, the browser will load up a background picture due to the current state of the hover and active did not immediately trigger. And special style is not loaded at once, only the special style hover is triggered will begin to load caused by a short blank.

There is a solution is to do a picture all the pictures inside the issue in a timely manner so as to eliminate the picture can not be loaded. To set the offset and the default background picture picture by moving background-position property only from the upper left corner of the display principle to solve the problem:

Here is the background picture:

Code section:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style>
        div{
            width: 131px;
            height: 130px;
            border: 1px solid red;
            background-image: url("img/img.png");
        }
        .two{
            width: 131px;
            height: 162px;
           background-position: -131px 0;
        }
        .three{
            width: 131px;
            height: 162px;
            background-position: -262px 0;
        }
    </style>
</head>
<body>
    <div  class="one"></div>
    <div  class="two"></div>
    <div  class="three"></div>
   

</body>
</html>

By default the box and background offset the effect of making the top left display: