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

所属分类: 网页制作 / CSS 阅读数: 1720
收藏 0 赞 0 分享

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

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

第一张,背景图片和容的左上对齐,0px 0px 也可以写成left top
 
第二张,背景图在容器中间,定点坐标为正值
 
第三张,背景图部分在容器左上,定点坐标为负值
 
到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片,返回去我们看一下开始的时候介绍的两个图片,我们就是可以用:背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。

但是我们为了调用方便,在排列这些小图片的时候要讲究一点规则,比如:小图之间的距离通常是调用小图的容器的大小,或者距离更大一点,这样就可以避免在容器内显示出我们不愿意显示的图片!

补充一点,如果定位用的是百分比话,算法比较特殊。我举个例子:

代码:

background:#FFF url(image) no-repeat fixed 50% -30%;

这个时候图片应该在容器的什么位置呢,算法公式如下:

图片左顶点距容器左顶点的坐标位置为

x:(容器的宽度-图片的宽度)x50%

y:(容器的高度-图片的高度)x(-30%)

得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。

比如:容器是width:600px;height:600px;而图片是width:200px;height:200px;

我们用上面的样式,可以得到图片位置为:

x:(600px-200px)*50%

y:(600px-200px)*(-30%)

如下图:

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项,非常的实用,是篇非常不错的文章,这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建议,加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto,不论LI里面的内容多长,LI的宽度始终是100%,即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们,在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢?像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇,给大家讲述html5+css3实现气泡组件,讲解的十分的详细,这里推荐给大家,希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程,你可以把任意一张照片放到跳舞的漫画中,为他带上不同的帽子,让他翩翩起舞,下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图,在1024*768的分辨率下仍居中显示,如何做到这一点,下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框,结构使用到了table,样式用的css3,包含了多方面的知识,比较适合新手朋友们
收藏 0 赞 0 分享
查看更多