CSS背景图坐标定位详解及负数的使用技巧

    现在流行一种设计方式就是把一个网站内需要使用到的全部小图标做在一个图片内,各个小图标以固定距离对齐横或者竖排列.然后通过css的background postion属性来控制显示具体图标. 那么css如何理解图片的坐标呢?以下是详细介绍

    背景图像定位中我们要明确的几点： 

 

1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。 

 

2、坐标轴的原点就是对应容器的左顶点。 

 

3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。 

 

4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。 

 

5、x y的值可以用百分比或者px来表示。 

 

6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。 

 

7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。 

 

下面我用几个图示来说明一下几种情况，蓝色块表示图片，虚线框表示容器（可以div，td，或者直接就是body），注意只有背景图片在容器内我们才能看见，我用白色表示可见部分，而且超出容器范围的是看不见的，我用灰色表示。容器的左定点的坐标就是（0，0）。 

关注宁波网站建设博客，更多精彩分享，敬请期待！
 

Tags：

转载：感谢您对宁波网站建设博客网站平台的认可，以及对我们原创作品以及技术文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源宁波网站建设博客”。/view/746.html

很赞哦！ ()