理解background-position属性

做导航菜单是，最常用到这个属性。现在流行用一张图片或者两张图片来制作鼠标的划过动画。这时就会涉及到背景图片的定位问题。

里面控制背景的代码如下：

    #tabs1 a {
      float:left;
      background:url("images/tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url("images/tabright1.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#627EB7;
      }

当鼠标移上去时的代码：

    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }

这里必须理解background-position属性，根据css手册介绍如下：

语法：

background-position : length || length
background-position : position || position

取值：

length	:	百分数 \| 由浮点数字和单位标识符组成的长度值。
position	:	top \| center \| bottom \| left \| center \| right

说明：

设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

示例：

div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }

根据理解

当鼠标移上去时的代码应该是这样的：

    #tabs1 a:hover {
      background:url("images/tableft7.gif") no-repeat 0% -42px;
      }
    #tabs1 a:hover span {
      background:url("images/tabright7.gif") no-repeat 100% -42px;
      }

简化后就是原来的代码了。

那么最开始的代码也可以这样写：

    #tabs1 a {
      float:left;
      background:url("images/tableft1.gif") no-repeat 0% 0%;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url("images/tabright1.gif") no-repeat 100% 0%;
      padding:5px 15px 4px 6px;
      color:#627EB7;
      }

都是以左上角为原点。

把这个理解，做类似的很想菜单就很容易了。