Core tips: CSS background positioning background-position Negative has been difficult to understand the difficulties, on the one hand with less, on the other hand, the understanding of the lack of depth, today took a little time to seriously think about, my experience written to detail the source of reference
Here's a background map I want to use:
The code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" gb2312 "> <pead> <style type=" Text/css "> < !--. style1,.style2,.style3{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; }. style2{background-position:-50px-50px; }. style3{background-position:100px 100px; }. blue{Color:blue; }--> </style> </pead> <body> x:0,y:0 x:-50px,y:-50px x:100px,y:100px </BODY&G T </body> </ptml>
The HTML page is a 162*162 gray background div block and adds three different locations to the background picture,
The effect you see in the browser:
As you can see from the image above: when background-position:0 0. When the top left corner of the picture is coincident with the upper left corner of the Div, when we locate the picture to the left and the top of the background-position:-50px-50px, it also takes the top left corner of the Div as the center, the figure moves to the left 50PX, and the 50PX moves up. The third example uses positive values, which can be interpreted as the effect of moving the graph to the right and down. This should be a good understanding.
To sum up is the above is to Div 0, 0 points for the reference point picture movement, if the Div area interpreted as an axis chart, left, all negative, right, the next positive.
It seems that you can not remember so much, then I will tell you, you should remember what it!
In practice, most of the situation is to know the position of a figure as the yellow point above, we should be measured in the effect of its length of two values are 150PX, then we define the position of the map will be written background-position:-150px-150px; The volume method on the diagram looks at the image below (this is the same as the one you use for the effect or design), remember this diagram and believe that you will be able to master the method of negative background image.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
