CSS the full tutorial (Background-position app) from a large map to take a small picture

Ext.: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

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.

When the first side of the Web site, often encountered this phenomenon, at that time do not know what technology, people's entire picture material will not be used, can only be used PS transduction, cut into a single ...

In fact, this is a very simple technology, is because the imagination is too difficult, has been unable to find the key to the problem.

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 the side dish now wants to make a +1 button, the use of the above image, 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, so it is not called style, because the text length of the hyperlink changes, the style also changed.

The general practice of the earth is that 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:

1 <div class= "btn" >2     <a href= "http://www.kpdown.com" >+1</a>3 </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:

1. Btn{2     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:

1. Btn{2     Background:url (bg.png); 3     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). 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 up a bit Div the width, height, let it and small figure of the width, the same as high 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, theCSS style is as follows:

1. Btn{2     Background:url (bg.png); 3     background-repeat:no-repeat;4     background-position:-25px-374px;5     height:16px;6     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{2     Background:url (bg.png); 3     background-repeat:no-repeat; 4     background-position:-25px-374px; 5     height:16px; 6     width:24px; 7     text-align:center; 8} 9. btn a{10     line-height:16px;11}

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{2     Background:url (bg.png); 3     background-repeat:no-repeat; 4     background-position:-25px-374px; 5     height:16px; 6     width:24px; 7     text-align:center; 8} 9. btn a{10     line-height:16px;11     display: Block;12     text-decoration:none;13}

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{2     Background:url (bg.png); 3     background-repeat:no-repeat; 4     background-position:-25px-374px; 5     height:16px; 6     width:24px; 7     text-align:center; 8} 9. btn a{10     line-height:16px;11     display: Block;12     text-decoration:none;13}14. btn:hover{15     background-position:-50px-374px;16}

final effect-before mouse move in:

final effect-after mouse move in:

Well, the tutorial is over, and the side dishes are simply a demonstration of a complete production process, with a lot of details in between, such as browser compatibility, CSS optimization, and so on, which needs to be explored by the reader.

In fact, side dishes have been said CSS cutout, the real technology called CSS Sprite Technology, people are accustomed to call CSS Wizard.

       This technology has the advantage and disadvantage, the advantage is because the picture is put together, requests only then requests one picture, reduces the interaction with the server, but also resolves 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.