css背景图片平铺的方法和传统用css设置背景图片的方式一样简单，但是与传统的控制方式相比，css提供了更多的可控选项，我们先来看看最基本的设置图片的方式。 Xhtml代码： css代码：#content { border:1px Solid #000fff; 高度：500px； 背景图像：url(images/bg.GIF); 网页中id为content的元素被我们设置为使用images文件夹中的bg.GIF作为背景，这与传统表格布局中的设置没有什么区别。 在默认状态下，背景也以图块的形式出现在元素中。 然而，用css来控制背景其实并不是那么简单。 其实css给我们提供了更多控制背景的属性，包括元素是否需要平铺。 改进的代码：#content { border:1px Solid #000fff; 高度：500px； 背景图像：url(images/bg.GIF); 背景重复：重复-x； 添加了背景重复：重复x； 之后，背景现在只在X轴上平铺，即垂直平铺，但不是垂直平铺。 这是 css 对背景细节的控制之一。 background-repeat是背景平铺的属性设置，可选值包括：repeat是默认形式css背景图片不平铺，完全平铺背景； no-repeat 不在X、Y轴方向平铺； Repeat-x 水平平铺背景； 重复 -y 垂直平铺背景。 平铺选项是网页设计中经常使用的选项，例如网页中常用的渐变背景。 使用传统方法制作渐变背景往往需要平铺长度为1px的背景，但为了防止水平平铺平铺，高度往往设置为低于1000px。 如果使用repeat-x模式css背景图片不平铺，只需要根据需要的高度设计渐变背景即可，不再需要使用超高的图片进行平铺。
发表评论