Parsing of a CSS sprite to intercept small graphs from large images

This article mainly introduces the CSS sprite from the large map to capture the complete tutorial of the relevant data, the need for friends can refer to the following

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.

Earth people generally practice is that p inside a hyperlink, hyperlinks responsible for the implementation of functions, p is responsible for loading the background map. The HTML structure is as follows:

<p class= "btn" >    <a href= "<a href=" http://www.jb51.net ">+1</a" >http://www.jb51.net ">+1 </a</a>></p>

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);}

Effect

P 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;}

This will not be repeated.

P 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, p load 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 map, want to extract, need to use the Background-position property, this property is equivalent to the large picture does not move, to move the vertex of P, moving to the vertex position of the target small map, such as:

In this way, p shows a small map, but not only the small picture, but the shadow part of the picture, how to do? Set the width and height of p, so that it and the small picture of the width, the same height 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, p moves, can only be moved to the right, downward, 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 p, this property is the child node, vertical center p in the hyperlink, Just set the Line-height property of the a tag to the height of p. 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:

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 p, it can become a hand type, but 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:

. 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 backgrounds when the mouse is moved in.

This example is P inside set a tag, the mouse moved into the background, of course, refers to the mouse moved into the p, and the background is also changed the background of P, not a label Oh!!

So the style to call Hover,p on the P 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:

. 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;}

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

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!