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

侠客 2019-11-08

我们在钻研其他的网站的样式的时刻常常会发明一种环境，便是在很多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）。