CSS语法的背景重复

html-css014

CSS语法的背景重复,第1张

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

默认地,背景图像将从一个元素的左上角开始。请看下面的例子:

body { background-image: url(/i/eg_bg_03.gif)background-repeat: repeat-y}背景定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置:

body { background-image:url('/i/eg_bg_03.gif')background-repeat:no-repeatbackground-position:center}为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。

如果只出现一个关键字,则认为另一个关键字是 center。

所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:

p { background-image:url('bgimg.gif')background-repeat:no-repeatbackground-position:top}下面是等价的位置关键字: 单一关键字 等价的关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:

body { background-image:url('/i/eg_bg_03.gif')background-repeat:no-repeatbackground-position:50% 50%}这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:

body { background-image:url('/i/eg_bg_03.gif')background-repeat:no-repeatbackground-position:66% 33%}如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。

background-position的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

body { background-image:url('/i/eg_bg_03.gif')background-repeat:no-repeatbackground-position:50px 100px}注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。

你好!你可以使用定位的方式来叠加背景图片。

也就是说你的body事先设置好背景后,再定位body中的DIV元素,并调整好位置,最后为定位的DIV元素设置背景图像,从而事先背景的叠加。

你的背景图片是什么样的图片,是可重复的图片还是不可重复的,如果是不可重复的,那建议换一张450X450的,如果可重复,那么把background-repeat:no-repeat去掉就好。