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

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 4)
Loading ... Loading ...

CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来．
下面是我要用到的一个背景图：

用如下代码测试

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
  3. <head>
  4. <style type="text/css" >
  5. <!--
  6. .style1,.style2,.style3{
  7. float:left;
  8. width:162px;
  9. height:162px;
  10. background:#CCCCCC url(http://www.52004.com.cn/wp-content/uploads/2008/05/1.gif) 0 0 no-repeat;
  11. border:1px dotted #999999;
  12. color:red;
  13. margin-right:10px;
  14. }
  15. .style2{
  16. background-position:-50px -50px;
  17. }
  18. .style3{
  19. background-position:100px 100px;
  20. }
  21. .blue{
  22. color:blue;
  23. }
  24. -->
  25. </style>
  26. </head>
  27. <body>
  28. <div class="style1">
  29. x:0,<span class="blue">y:0</span>
  30. </div>
  31. <div class="style2">
  32. x:-50px,<span class="blue">y:-50px</span>
  33. </div>
  34. <div class="style3">
  35. x:100px,<span class="blue">y:100px</span>
  36. </div>
  37. </body>
  38.  
  39. </html>

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

你可能对这个有点兴趣：

可乐发表于:05-28-08

看完了说点啥？