宁波网站建设咨询:宁波网站建设
13780026116 宁波网站制作
网站公告
PHP技术
技术交流
网络推广
网站建设常见问答
殷雯动态
你的位置:首页> 新闻/观点 > 网站建设常见问答>CSS背景图坐标定位详解及负数的使用技巧
网站建设常见问答
CSS背景图坐标定位详解及负数的使用技巧

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)。 


点击:  1624    时间: 2017-05-23
上一条: 文化局在我公司文艺演出
下一条: layer的confirm方法的非阻塞的问题
 
 
快速通道: 关于我们    网站建设    主机域名    付款方式    我的声明
  
联系我们
手机扫描QQ
网站建设咨询:
咨询热线:
宁波殷雯网站建设工作室
地 址: 浙江省宁波市江东区
电 话: 13780026116 
邮 箱:
waichun@qq.com
宁波网站建设
宁波网站制作
13780026116
宁波殷雯网站建设工作室 版权所有   浙ICP备16030041号-1