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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来.
  下面是我要用到的一个背景图:


  运行下面代码:

代码调试框 [www.mb5u.com]

[ 可先修改部分代码 再运行查看效果 ]

  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;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能把握背景图负值的方法了


  本文作者:purecss

来源:无忧整理//所属分类:CSS教程/更新时间:2007-06-06
相关CSS教程