css里repeat-x啥意思

html-css07

css里repeat-x啥意思,第1张

repeat-x是横向铺满,是css里background的一种属性,代表图片向水平平铺。

比如导航条,水平方向色块颜色是一致的。那切图的时候就可以纵向切一小块命名为nav.jpg。然后定义css,代码如下:

.nav{background:url(./images/nav.jpg) repeat-xheight:35px}

这个目前的css3及以前的css规则中没有提及到。目前能够对背景进行的操作就是横向平铺(background-repeat:repeat-x)、纵向平铺(background-repeat:repeat-y)、完全平铺(background-repeat:repeat/不填写)、背景图大小(background-size)、背景定位区域(background-origin)、多重背景图片(background-image:url(bg_flower.gif),url(bg_flower_2.gif))等,还没有涉及到你说的这个重复次数的问题,你可以根据背景图的大小和想要重复的次数计算一下对应的宽高,然后限定一下宽高进行完全平铺,最后用定位将这个标签定位到你想要的位置。

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:

body

{

background-image:url('/i/eg_bg_03.gif')

background-repeat:no-repeat

background-position:50% 50%

}

这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50%

50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

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