CSS背景图片平铺方法

使用css设置背景图片和传统的方法一样简单，但是相比传统的控制方法，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。 xhtml代码：

复制代码代码如下：

CSS代码：

复制代码代码如下：

＃内容{

边框：1pxsolid#000fff；

高度：500px；

背景图像：url(images/bg.GIF);

网页中id为content的元素被我们设置为使用images文件夹下的bg.GIF作为背景，这与传统表格布局中的设置没有什么区别。 默认情况下，背景也以平铺的形式出现在元素上。 但用css来控制背景其实没那么简单。 其实css给我们提供了更多控制背景的属性，包括元素是否需要平铺。 改进后的代码：

复制代码代码如下：

＃内容{

边框：1pxsolid#000fff；

高度：500px；

背景图像：url(images/bg.GIF);

背景重复：重复-x；

添加background-repeat:repeat-x;后css 背景图片平铺，背景现在仅在X轴上平铺，即垂直平铺，而不是水平平铺。 这是 css 对背景细节的控制之一。 background-repeat是背景图块的属性设置，可选值包括：

复制代码代码如下：

Repeat 是默认形式，它完全平铺背景；

no-repeat 不在 X 和 Y 方向平铺；

Repeat-x 垂直平铺背景；

重复 y 水平平铺背景。

平铺选项是网页设计中经常使用的选项，例如网页中常用的渐变背景。 使用传统方法制作渐变背景，往往需要平铺长度为1px的背景css 背景图片平铺，但为了防止横向平铺，高度通常设置为低于1000px。 如果使用repeat-x模式，只需要根据需要的高度设计渐变背景即可，不再需要使用超高的图片进行平铺。