background-position

在学习网页“换肤”效果时：对background-position的理解更深了。

这是我使用的一整张图片：

这是我学习的换肤效果图：

代码中background-position的数据是递进的，它跟原图的颜色排序怎么就不一样了呢？换肤代码：

 

#skin { 
   float:right; 
   margin:10px; 
   padding:4px; 
   width:120px; 
}
#skin li { 
   float:left; 
   margin-right:4px; 
   width:15px; 
   height:15px; 
   text-indent:-9999px; 
   overflow:hidden; 
   display:block; 
   cursor:pointer; 
   background-image:url("../images/theme.gif"); 
}
#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

直到我把“li”的"width:15px;"改成了"width:20px;"
换肤效果图变成了这样：紫色的后面怎么会跟着蓝色呢？
后遂想到 ：background-repeat的默认效果是"background-repeat:repeat;"而我在网上搜到的关于background-position 的demo设置的都是"background-repeat:no-repeat;"所以才困惑了那么久，还是要仔细看、多练习才能记住呀！background-position 属性用来控制背景图片在元素中的位置。指定的是图片左上角相对于元素左上角的位置。
设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。属性为数值“background-position:0 0;”"background-position:100px 0;"  （图片向右移动100px）”background-position:0 100px;  (图片向下移动100px）”background-position:100px 100px;“  (图片向右移动100px，向下移动100px）