CSS background background-position negative position in-depth understanding

Here is a background image that I want to use:

The code is as follows:

1. <style type= "text/css" > <!-- .style 1 ,.style 2 ,.style 3 { float : left ; width : 162px ; height : 162px ; background : #CCCCCC url (/jiaocheng/UploadFiles/ 200804 / 2008041122582457 .gif) 0 0 no-repeat ; border : 1px dotted #999999 ; color : red ; margin-right : 10px ; } .style 2 { background-position : -50px -50px ; } .style 3 { background-position : 100px 100px ; } . blue { color : blue ; } --> </style>   <div class= "style1" > x: 0 ,<span class= "blue" >y: 0 </span>  <div class= "style2" > x: -50px ,<span class= "blue" >y: -50px </span>  <div class= "style3" > x: 100px ,<span class= "blue" >y: 100px </span>     </div></div></div>

The HTML page is a 162*162 gray background div block and adds three different positions to the background image,
The effect you see in the browser:

From what you can see: when it is background-position:0 0; When the upper left corner of the picture is coincident with the upper-left corner of the Div, when we locate the image to the left and the top of the background-position:-50px-50px, the top left corner of the div is centered, the figure moves to the left 50PX, and the 50PX is moved up. The third example uses positive values that can be interpreted as the effect of moving the graph to the right and down. This should be a good understanding.
Summing up is the above are the div 0, 0 points for the reference point of the picture movement, if the Div area is interpreted as an axis chart, left, on all negative, right, the next is positive.

As if to say so much you can not remember, then I will tell you, you should remember what!

In practice, most of the situation is to know the position of a map as the yellow point, we should be on the measure of its length to arrive at two values are 150PX, then we define the position of the map will be written background-position:-150px-150px; The amount method on the graph (this picture is equivalent to what you use or called the design), remember this picture is sure you can grasp the negative background image method.

CSS background background-position negative position in-depth understanding