CSS中背景background-position负值定位深入理解

下面是我要用到的一个背景图：



代码如下：

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>

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
　　在浏览器中看到的效果：



　
　从上图可以看到：当为background-position:0
0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px
-50px;时发现图片向左、上移动了，也就以DIV的左上角为中心，图向左移动了50PX，向上也移动了50PX．第三个示例采用的都是正值，可以解解
释为图向右、向下移动的效果．这个应该是好理解的．
　　总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴图，向左，上都为负，向右，下为正值．

　　好象说这么多你也记不住，那我就告诉你，你应该记住什么吧！

　
　在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写
background-position:-150px
-150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了。