CSS里面no-repeat后面两个数字的意思

最近一直纠结CSS里面no-repeat后面两个数字的意思，百度上查了好多，发现每个人的理解都是不一样的，而且在不知道什么意思的情况下，看到不同人的解读，最后依然找不到正确的答案；

研究了很久，在此归纳：

以此为例：

background:url(../images/l_r_btn.gif) no-repeat -8px 9px;

意思：【背景图】【不平铺】【背景图向左移动8像素】【背景图向下移动9像素】　

 

详细解读：

假设该背景图片在div里面，设div标签的左上角为大原点（0，0），背景图片的左上角为小原点（0，0）（大原点、小原点不是专业术语，是我用来代表两个左上角取的名字），初始状态是大原点与小原点是重合状态，大原点作为参照物，小原点根据no-repeat后面两个数字移动位置：

第一个数字代表在水平方向移动（X轴）：正数代表从原位置向右移动，负数代表从原位置向左移动；

第二个数字代表在垂直方向移动（Y轴）：正数代表从原位置向下移动，负数代表从原位置向上移动；

转载于:https://www.cnblogs.com/wwHww/p/9007598.html