background-position-background positioning of CSS cutout

I believe many children who like to study the Web interface have experienced a wonderful phenomenon: many of the images on the Web page are synthesized on a single image.

In fact, this is a very simple technique.

To implement a CSS cutout, you only need to use one property: Background-position.

In the literal sense, this attribute is the background positioning, first look at the Google site footage, as follows:

If we want to do a +1 button now, using the top of the footage, the normal status of a graph, the mouse to display after the show B graph, to achieve such a dynamic effect.

Buttons are used to implement the function, usually with hyperlinks in response to click events, but not the background map directly on the hyperlink,

In general, a div inside a hyperlink, hyperlinks responsible for the implementation of functions, Div is responsible for loading the background map. The HTML structure is as follows:

<class= "Btn"><href= "http://www.kpdown.com">+1</A ></div>            

With the HTML skeleton, the next step is to write a CSS style.

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

. btn{    background:URL (bg.png);  3}  

effect

Div is a block-level element, the default is a row, this does not care, but see the background map is repeated, this is obviously not what we want, plus background-repeat:no-repeat; attributes, the improved style is as follows:

. btn{    background:URL (bg.png); background-repeat:no-repeat;  4}    

This will not be repeated.

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).

+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 .

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.

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, basically done.

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

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

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:

1. btn{2BackgroundURL (bg.png); 3  Background-repeat: No-repeat;  4  Background-position:- 25px-374px;  5  Height:16px; 6  Width:24px; 7  Text-align:center; 8}< Span style= "COLOR: #008080" > 9 .btn a{10  Line-height:16px;                 

The effect is as follows:

Next, there are problems, we can find that only when the mouse is moved to +1 text, the mouse will become a hand type, in order to respond to events.

This is obviously not what we want, it should be when the mouse moves into the picture, when the mouse is actually moved into the Div, it can become a hand shape, can also respond to events.

This is also simple, just add display:block on the A tag (hyperlink);

In addition this underline is more unsightly, with text-decoration:none; attributes are removed, very common, not much to say.

The styles are as follows:

1. btn{2BackgroundURL (bg.png);3Background-repeat:No-repeat;4Background-position:-25PX-374PX;  5  Height:16px; 6  Width:24px; 7  Text-align:center; 8}< Span style= "COLOR: #008080" > 9 .btn a{10  Line-height:16px;  Display:block;  Text-decoration:none;                 

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

This example is the div inside a set of a tag, the mouse moved into the background, of course, refers to the mouse moved into the Div, and change the background is also a div background, not a tag of Oh!!

So the style to call Hover,div on the div tag is btn, so write. btn:hover{}.

Change background also need to find the background picture, this need to key small map, that is, the top point of the B-chart.

Just show a small map, b and a small map on the same horizontal line, so the vertical direction of the moving pixels are the same, horizontal direction difference is not a small graph of the horizontal pixels plus a small chart width.

After testing, the displacement of the B-plot is: -50px-374px, the size of the size of the need not care, and certainly a small map, not the same can not be done.

The positioning of the B-map background-position:-50px-374px; btn:hover{}.

The styles are as follows:

1. btn{2BackgroundURL (bg.png);3Background-repeat:No-repeat;4Background-position:-25px-374px;5Height16px;6Width24PX;  7  Text-align:center;< Span style= "COLOR: #008080" > 8} 9 .btn a{10  Line-height:16px;  Display:block;  Text-decoration:none; }14 .btn:hover{15  Background-position:-50px-374px;                 

final effect-before mouse move in:

final effect-after mouse move in:

CSS cutout, the real technology called CSS Sprite Technology, people are accustomed to call CSS Wizard.

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.

background-position-background positioning of CSS cutout