Complete tutorial on CSS small image removal from a large image (background-position Application)

I believe that many children's shoes who like to study the webpage interface have encountered a wonderful phenomenon: many pictures and materials on the webpage are merged into one picture.

At first, when I imitated the website, I often encountered this phenomenon. At that time, I didn't know what technology it was at. The whole picture material of people would not be used. I could only use PS to cut the image and cut it into a single image for reuse...

In fact, this is a very simple technology. It is hard to find the key to the problem because it is too difficult to imagine.

To Implement CSS image cutting, you only need to use one attribute: Background-position.

Literally, this attribute is the background positioning. First, let's look at the Google website's material map,As follows:

For example, if you want to create a + 1 button for a dish, you can use the above material graph to display the chart in normal state, move the mouse to display the B Chart, to achieve such a dynamic effect.

Buttons are used to implement functions. Generally, a hyperlink is used to respond to a click event, but the background image cannot be directly added to the hyperlink. This is not a style, because when the text length of the hyperlink changes, the style has also changed.

Generally, a hyperlink in a div is used to implement functions, and a div is used to load the background image.The HTML structure is as follows:

1 <DivClass= "BTN">2<AHref= "Http://www.kpdown.com">+ 1</A>3 </Div>
 

 

With the HTML skeleton, We need to write CSS styles.

If we do not consider anything, we can directly set the entire image as the background,The style is as follows:

 
1 . BTN{2 Background:Url(bg.png);3}
 

 

Effect

DIV is a block-level element. It occupies one row by default. You don't need to worry about this first, but we can see that the background image is repeated. This is obviously not what we want, with background-repeat: No-Repeat; attribute,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 top left corner is the vertex, and the top left corner of the background image is also the top left corner. When the DIV loads the background image, it will overlap the two vertices. The coordinates of the vertices are (0, 0 ). Looking at the picture without understanding it is very simple...

 

A small image of + 1 is mixed in a large image. to extract the image, you need to use the background-position attribute. This attribute is equivalent to a large image that does not move the vertex of the div, move to the vertex position of the target small image,For example:

In this way, the DIV shows a small image. However, it is not only a small image, but a shadow part. What should I do?SetDivMake it the same as the width and height of a thumbnail.You can !!

Let's take a look at the background-position attribute. It has two parameters: pixels moving horizontally and pixels moving vertically.Negative number. The big picture does not move, and the DIV can only move to the right or down. Just remember that the pixels moving in the two directions are expressed as negative numbers!

Therefore, you only need to find the horizontal moving pixel and vertical moving pixel of the small image relative to the vertex in the upper left corner of the big image. You don't need any professional tools for cooking. It's very convenient to use. You can cut it from the top-left vertex of the big image to the vertex of the small image. It's almost the pixel at a glance, and then debug it, this is basically done.

In this example, the displacement of a small image is-25px-374px, and the size of a small image is 24px 16px. Therefore,The CSS 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:

In this way, even the thumbnail is shown! Easy !!

I want to explain the problem first. There is + 1 on the image, and I wrote + 1 on the hyperlink. This is because the text content is not written on the image in many cases, which is too flexible, text is text. In order to give you a complete demonstration, I wrote another + 1, and then I will process it!

First, center + 1, which is divided into horizontal and vertical centers. The horizontal center hyperlink requires text-align: center on the Div. This attribute is for subnodes; in vertical center Div, you only need to set the line-height attribute of tag a to be the same as that of Div.The 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   Text-align : Center ; 8 } 9  . BTN { 10   Line-height : 16px ; 11 }

 

The effect is as follows:

 

Next, there is another problem. We can find that only when you move the mouse over the + 1 text will the mouse become a hand style to respond to the event.

This is obviously not what we want. It should be that when the mouse is moved into the image, it can be changed to a hand when the mouse is moved into the DIV, and it can also respond to events.

This is also simple. You only need to add the display: block attribute to the tag (Hyperlink.

In addition, this underline is quite confusing. Use text-Decoration: none; to remove the attribute, which is very common.

The 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   Text-align : Center ; 8 } 9   . BTN { 10   Line-height : 16px ; 11   Display : Block ; 12   Text-Decoration : None ; 13 }

 

The last thing left is switching the background when the mouse moves in.

In this example, a tag is set in the DIV, And the mouse is moved to the background, of course, it refers to moving the mouse to the DIV, and the background is also changed to the background of the DIV, not the tag !!

Therefore, hover must be called on the DIV label. The DIV style is BTN, so it is written as. BTN: hover {}.

To change the background, you also need to find the background image, which requires a small image, that is, the B image shown above.

The displayed figure is a small image. The smaller image B and the smaller image a are on the same horizontal line. Therefore, the moving pixels in the vertical direction are the same, the horizontal direction difference is not the horizontal pixel of a small image plus the width of a small image.

After testing, the displacement of the B Small graph is-50px-374px, so you don't have to worry about the size. It must be the same as that of the small graph.

Position background-position:-50px-374px of the Small B image and put it in. BTN: hover.

The 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   Text-align : Center ; 8 } 9   . BTN { 10  Line-height : 16px ; 11   Display : Block ; 12   Text-Decoration : None ; 13 } 14   . BTN: hover { 15   Background-Position : -50px-374px ;16 }

 

Final effect-before moving the mouse:

Final result-move the mouse over:

Well, the tutorial is over now. This is just a simple demonstration of a complete production process. There are still many details in the process, such as browser compatibility and CSS optimization, this requires the reader to explore.

In fact, the small dish has been talking about CSS tips. The real technology is called CSS sprite technology, and Chinese people are used to being CSS genie.

This technology has both advantages and disadvantages. The advantage is that because all images are put together, only one image is requested during a request, which reduces the number of interactions with the server and solves the problem of hover delayed loading. The disadvantage is that it is difficult to control, scalability is not good, and there will be changes in the future, it can be said that it is a drag-and-drop, and sometimes the background is broken because of different screen resolutions.

The level of dishes is limited,ArticleSorry!

 

 

Appendix:

 

Online Demo address

 

Download this complete example