来源:互联网 作者:佚名 时间:12-17 14:15:55 【大 中 小】
点评:我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片;
又如:
这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽。
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:
我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。
代码:
div{ background:#FFF url(image) no-repeat fixed x y;}
|
这里的background的属性值依次为:
#FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
image 背景图片:(这里是图片的地址)
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)
背景图像定位中我们要明确的几点:
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%)
如下图:
以左上角为坐标原点
加入你需要把图片上距左边40PX 距上边10PX的图片显示出来<DIV CLASS="m"></div>
.m{ background:url(img/01.jpg) no-repeat;background-position:-40px -10px}
前面的总看得懂吧 解释下这句
background-position:-40px -10px
背景想左偏移40PX 向上偏移10PX
m有多大就显示多大的图片出来
参考资料:
http://www.jb51.net/css/23213.html
http://hi.baidu.com/xinliang211/blog/item/2742802e360ea55d4fc226b3.html
分享到:
相关推荐
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
CSS中背景图片定位方法:background-position的用法,附带算法
批量输出 CSS background-position 属性的定位像素值
这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。...此时背景图片将被定位于对象不包括补丁
css 之 background-position-x
background-position的说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ...
CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来
在CSS3中,通过background-im、age等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。 background: background-color background-image background-position background-repeat background-...
background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。
今天无意中,看别人代码发现一个背景图中有很多图片 当时想这么多怎么就显示一个按钮的背景呢?百思不得其解,后来发现CSS 这样定义: 复制代码代码如下: .nav { background:transparent url(images/y.gif) no-...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
CSS在图片中的应用 #face { width:580px; clear:both; height:66px; margin:0 auto; font-size:12px; } #face li { list-style:none; padding:0 0 0 25px; margin:0; width:57px; height:26px; line-...
background background-attachment background-color background-image background-position background-positionX background-positionY background-repeat layer-background-color layer-background-image 定位 ...
背景图效果,还附有以使用精灵图的方式解决网站中的小图标问题,这种办法相比较之前的方法,稍微有点类似,主要用到background-position属性外,还需...