The use of CSS background-position properties

Ask the next background-position:left-29px; What does that mean?? I felt like I was moving to the left-29 pixels, but I didn't test it. Ask a Master

is used to locate the position of the picture.
The main use of a PNG on a multiple logo or ICO this time to use the Background-position
Background-position:x y x equals the parallel axis y equals the vertical lines axis.
The value of x y can be a positive number, or it can be negative

Div can be understood as a rectangular box, its upper-left corner is a vertex, the background image of the vertex is also the upper-left corner, the div loading the background map, will be two vertices coincident, vertex coordinates (0,0). Do not understand the view of the picture, very simple ...

+1 of the small picture mixed in a large image, want to extract, need to use the Background-position property, this property is equivalent to the large picture, the vertex of the div moved to move to the vertex position of the target small map, such as:

In this way, the DIV shows a small map, but not only the small image, but the shadow part of the picture, how to do? Set the width and height of the div, so that it and the small picture of the width, high as it can be Bai!!

Take a look at the Background-position property, which has two parameters, the pixels moving horizontally, the pixels moving in the vertical direction, all in negative numbers. The big picture does not move, Div moves, also can only be right, move down, as long as remember that these two directions move the pixel to use the negative number to represent the line!

As a result, it is possible to move pixels vertically by moving the pixels horizontally to the top left-hand corner of the larger image. Side dishes also do not have any professional tools, use is very convenient, from the top left corner of the large figure to start cutting, to the small figure vertex that stop, a look at the pixel is almost, and then debug debugging, the basic will be done.

In this example, the displacement of a -25px-374px,a is: the size of the small map is: 24px 16px. Therefore, the CSS style is as follows:

. btn{    Background:url (bg.png);    Background-repeat:no-repeat;    background-position:-25px-374px;    height:16px;    width:24px;}

The effect is as follows:

This is a small figure to pull out! It's easy!!

First explain a problem, the picture has +1, and I wrote a +1 in the hyperlink, this is because many times the text content is not written in the picture, so flexibility is too poor, text is text, side dishes in order to give everyone a complete demonstration, so write a +1, then deal with it!

First +1 Center, center is divided into horizontal center and vertical center, horizontal center hyperlink, need to set text-align:center on Div, this property is child node, vertical Center div in the hyperlink, Just set the Line-height property of the a tag to the height of the div. The styles are 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;}

The effect is as follows:

This technique has advantages and disadvantages, the advantage is that the picture is put together, the request only need to request a picture, reduce the number of interactions with the server, but also to solve the problem of hover delay loading. The disadvantage is the bad control, the extensibility is not very good, after the change, can be described as reaching, and sometimes because of the screen resolution of different background fracture phenomenon.