Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail the method of "CSS Sprite intercepting a small picture from a large picture". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "CSS Sprite intercepts a small picture from a large picture" can help you solve your doubts.

Buttons are used to achieve the function, generally using hyperlinks to respond to click events, but can not add the background image directly to the hyperlink, so it is not called style, because when the text length of the hyperlink changes, the style also changes.

The general practice of earthlings is that there is a hyperlink inside the div, which is responsible for implementing the function, and the div is responsible for loading the background image. The structure of html is as follows:

Copy the code

The code is as follows:

Http://www.jb51.net">+1

With the html skeleton, the next step is to write the css style.

If we don't think about anything, just set the whole picture as the background, the style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

}

Div is a block-level element, which occupies one line by default. Don't worry about this, but you can see that the background image is repeated, which is obviously not what we want. Add the background-repeat:no-repeat; attribute, and the improved style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

Background-repeat:no-repeat

}

So there's no repetition.

Div can be understood as a rectangular box, its upper-left corner is the vertex, the background image of the vertex is also the upper-left corner, div load the background image, the two vertices will coincide, the coordinates of the vertex is (0pm 0). If you don't understand, look at the picture, it's very simple.

The + 1 small image is mixed in the large image. To extract it, you need to use the background-position attribute, which is equivalent to the large image. Move the vertex of the div to the vertex position of the target small image, as shown below:

In this way, what is displayed in the div is a small image, but what if it shows not only the small image, but also the shaded part of the picture? Set the width and height of the div so that it is the same as the width and height of the small picture!

Let's take a look at the background-position property, which has two parameters, pixels that move horizontally and pixels that move vertically, both of which are represented by negative numbers. Large image does not move, div movement, can only move to the right, down, as long as remember that the pixels moving in both directions are represented by a negative number!

Therefore, as long as you find the small image to move the pixels horizontally and vertically relative to the vertices in the upper-left corner of the larger image. Small dishes do not use any professional tools, it is very convenient to use screenshots, starting from the top left corner of the large image, to stop at the vertices of the small image, look at the pixels, and then debug and debug, which is basically done.

In this example, the displacement of the A small picture is:-25px-374pxMagi A small image size is: 24px 16px. Therefore, the css style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

Background-repeat:no-repeat

Background-position:-25px-374px

Height:16px

Width:24px

}

In this way, it can be regarded as scratching out the small picture! It's easy!

First explain a problem, there is a + 1 on the picture, and I wrote a + 1 on the hyperlink, this is because many times the text content is not written on the picture, so the flexibility is too poor, the text is the text. In order to give you a complete demonstration, so I wrote a + 1, and then deal with it!

First center + 1, the center is divided into horizontal center and vertical center, horizontal center hyperlink, need to set the text-align:center;, attribute on the div is for the child node; vertical center div in the hyperlink, just set the a tag's line-height attribute to be the same as the height of div. The style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

Background-repeat:no-repeat

Background-position:-25px-374px

Height:16px

Width:24px

Text-align:center

}

.btn a {

Line-height:16px

}

Next, there is a problem, we can find that only when the mouse moves over the + 1 text, the mouse will become a hand and respond to the event.

This is obviously not what we want, it should be when the mouse is moved into the picture, or rather, when the mouse is moved into the div, it can become a hand and respond to events.

This is also simple, just add the display:block; attribute to the a tag (hyperlink).

In addition, this underscore is a nuisance to the eye, so it is very common to remove it with the text-decoration:none; attribute, so I won't say much about it.

The style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

Background-repeat:no-repeat

Background-position:-25px-374px

Height:16px

Width:24px

Text-align:center

}

.btn a {

Line-height:16px

Display:block

Text-decoration:none

}

The last thing left is to switch the background when the mouse is moved in.

This example is the div inside the a tag, the mouse moves into the background, of course, refers to the mouse into the div, and the background is also the background of the div, but not the a tag oh!

So the style to call hover,div on the div tag is btn, so it's written as .btn: hover {}.

To change the background, you also need to find the background picture, which needs to be small again, that is, the B picture pointed out above.

What has just been shown is the A small image, the B small image and the A small image are on the same horizontal line, so the moving pixels in the vertical direction are the same, and the horizontal difference is not the horizontal pixels of the A small image plus the width of the A small image.

After testing, the displacement of the B small picture is:-50px-374px, the size does not matter, it must be the same as the A small picture, it can not be done if it is not the same.

Put the location of small B image background-position:-50px-374px; in .btn: hover {}.

The style is as follows:

Copy the code

The code is as follows:

.btn {

Background:url (bg.png)

Background-repeat:no-repeat

Background-position:-25px-374px

Height:16px

Width:24px

Text-align:center

}

.btn a {

Line-height:16px

Display:block

Text-decoration:none

}

.btn: hover {

Background-position:-50px-374px

}

After reading this, the article "CSS Sprite's method of capturing small pictures from large images" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.