快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门24小时娱乐在线打造:利用CSS定位背景图片



我们在钻研其他的网站的样式的时刻常常会发明一种环境,便是在很多background属性里都调用同一张图片,来满意网页各个部分的应用。打开这种图片看一下,会发明这张图片上包孕了很多小图片,比如:

又如:

这些小图片便是整图瓜分后的各个部分,把各个部分放在一张图片上,而不是是分手存储成零丁的图片,其目的我们都知道,便是削减http哀求次数,节省光阴和带宽。

那么怎么来实现一张图片在不合的地方只显示此中的一部分呢,这就用到了我们本日要说的背景图片的定位问题。这个问题信托很多人都愁闷过,也常常有同伙问我,以是本日就澳门24小时娱乐在线打造系统的说一下:

我们知道在用图片作为背景的时刻,css要这样写,以div容器举例子,也可所以body、td、p等的背景,事理一样。

代码:

div{ background:#FFF url(image) no-repeat fixed x y;}

这里的background的属性值依澳门24小时娱乐在线打造次为:

#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”来表示的时刻,利用的是对齐澳门24小时娱乐在线打造规则,而不是坐标规则。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里的定位值来准确定位一个背景图片,返回去我们看一下开始的时刻先容的两个图片,我们便是可以用:背景定位和容器内才可见这两个性子来随意的调用整张图片的某一部分。

然则我们为了调用澳门24小时娱乐在线打造方便,在排列这些小图片的时刻要考究一点规则,比如:小图之间的间隔平日是调用小图的容器的大年夜小,或者间隔更大年夜一点,这样就可以避免在容器内显示出我们不乐意显示的图片!

弥补一点,假如定位用的是百分比话,算法对照特殊。我举个例子:

代码:

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

这个时刻图片应该在容器的什么位置呢,算法公式澳门24小时娱乐在线打造如下:

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

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

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

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

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

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

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

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

如下图:

您可能还会对下面的文章感兴趣: