|
我们在研究其他的网站的样式的时候经常会发现一种情况就是在很多background属性里都调用同一张图片来满足网页各个部分的使用打开这种图片看一下会发现这张图片上包含了很多小图片比如 又如 这些小图片就是整图分割后的各个部分把各个部分放在一张图片上而不是是分别存储成单独的图片其目的我们都知道就是减少http请求次数节省时间和带宽 那么怎么来实现一张图片在不同的地方只显示其中的一部分呢这就用到了我们今天要说的背景图片的定位问题这个问题相信很多人都郁闷过也经常有朋友问我所以今天就系统的说一下 我们知道在用图片作为背景的时候css要这样写以div容器举例子也可以是bodytdp等的背景道理一样 div{ background:#FFF url(image) norepeat fixed x y;} 这里的background的属性值依次为 #FFF 背景色（颜色值背景图片没有覆盖的地方或者没有背景图片时表现的背景色） image 背景图片（这里是图片的地址） norepeat 是否重复（图片小于容器的大小时默认会重复排列图片以填满容器norepeat表示不重复只有这个时候后面的定位坐标才有用） fixed 背景是否随容器滚动（有两个可选值scroll滚动fixed不滚动默认是scroll） x y 背景图像的定位（注意只有在norepeat下定位才有意义这个就是今天要讲的重点） 背景图像定位中我们要明确的几点 两个值前面一个是横向的定位我们称为x轴方向定位后面一个值是纵向的定位我们称为y轴方向定位如果只有一个值那默认的就是x轴方向这时y轴方向就默认的是上下居中对齐也就是center 坐标轴的原点就是对应容器的左顶点 这个坐标的y轴箭头朝下也就是右下方（容器内部）x y的值才都为正 x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值 x y的值可以用百分比或者px来表示 x y也可以用leftrighttopbottomcenter这五个对齐方式来表示但注意用leftrighttopbottomcenter来表示的时候应用的是对齐规则而不是坐标规则x为left是表示图片的左边和容器的左边对齐为right的时候表示图片的右边和容器的右边对其y为top的时候表示图片的顶部和容器的顶部对齐为bottom时表示图片的底部和容器的底部对齐x y等于center的时候表示居中对齐 x y用百分比或者px表示的时候其值可以为负数我们应用坐标规则就很容易理解负数表示的意义x为负数时候表示图片左顶点在容器左顶点的左侧y为负数时表示图片的左顶点在容器的左定点的上方也就是向左和向上超出容器的范围 下面我用几个图示来说明一下几种情况蓝色块表示图片虚线框表示容器（可以divtd或者直接就是body）注意只有背景图片在容器内我们才能看见我用白色表示可见部分而且超出容器范围的是看不见的我用灰色表示容器的左顶点的坐标就是（） 第一张背景图片和容的左上对齐px px 也可以写成left top 第二张背景图在容器中间顶点坐标为正值 第三张背景图部分在容器左上顶点坐标为负值
到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片返回去我们看一下开始的时候介绍的两个图片我们就是可以用背景定位和容器内才可见这两个性质来随意的调用显示整张图片的某一部分 但是我们为了调用方便在排列这些小图片的时候要讲究一点规则比如小图之间的距离通常是调用小图的容器的大小或者距离更大一点这样就可以避免在容器内显示出我们不愿意显示的图片！ 补充一点如果定位用的是百分比话算法比较特殊我举个例子 background:#FFF url(image) norepeat fixed % %; 这个时候图片应该在容器的什么位置呢算法公式如下 图片左顶点距容器左顶点的坐标位置为 x（容器的宽度图片的宽度）x% y（容器的高度图片的高度）x（%） 得到的结果应用坐标法则差值如果为负数百分比为正那么运算结果是负值如果差值为负数百分比也为负数那么运算结果就是正数总而言之就是这里的运算符合运算法则把运算的结果带入坐标法则就能得到图片的位置 比如容器是widthpxheightpx而图片是widthpxheightpx 我们用上面的样式可以得到图片位置为 x(pxpx)*% y(pxpx)*(%) |
