软件开发培训班 >> 编程开发 >> CSS


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

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

 

CSS


代码如下：

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
　　在阅读器中看到的 动机：

 

CSS

 

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

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

　　在 实际中多数状况是晓得一个图的位置要如上图中那个黄色的点，我们应该在 动机图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的 动机图或称设计图)，记住这张图相信你 定然能 主宰背景图负值的 步骤了 。

 

CSS