css 如何让背景图片拉伸填充避免重复显示

如何使背景图片完美拉伸填充，这是我们在网页设计中的一个常见议题。尽管听起来简单，但其实背后涉及到的技术和细节远超我们的想象。

想象一下在一个容器（无论是body、div还是span）中设定背景。以往在css2.1的时代，背景图片的长宽值是固定的，不能被灵活修改。这就导致了背景图片的重复显示。于是，我们有了repeat、repeat-x、repeat-y和no-repeat这些属性，用来控制背景图片的显示方式。常用的背景图片大致可以分为两类：一类是尺寸与区域大小完美匹配的大图，另一类则是通过重复显示形成规则大图背景的条状小图。

随着css3的出现，这个局面得到了极大的改善。background-size属性让我们有了实现梦想的可能。无论你是使用Firefox、Chrome还是IE9等浏览器，这个属性都能流畅运行。

下面让我们具体看看如何使用这个强大的属性：

一、通过数值设定背景图尺寸：

例如：

```css

background-size {

background-size: 200px 100px;

}

```

二、以百分比形式设定背景图尺寸：

例如：

```css

background-size2 {

background-size: 30% 60%;

}

```

三、选择等比扩展图片以填满元素（cover值）：

例如：

```css

background-size3 {

background-size: cover;

}

```

四、选择等比缩小图片以适应元素尺寸（contain值）：

例如：

```css

background-size4 {

background-size: contain;

}

```

五、让图片以自身大小填充元素（auto值）：

例如：

```css

background-size5 {

background-size: auto;

}

```

使用以上方法，你可以根据需求灵活调整背景图片的拉伸和填充方式。在网页设计中实现更出色的视觉效果，让背景图片完美融入你的设计之中。记住，不断和创新是设计之路上不可或缺的元素。在细节和技巧上下功夫，让你的作品在视觉上更加吸引人。以上述代码为例，可以通过调用`cambrian.render('body')`来实现背景图片的设置和优化。