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

但是

css3

出现以后，这个重复显示的情况被改善了。

background-size

属性可以让我们

之前的让背景图片拉伸填充的希望成真，

具体使用方法如下感兴趣的朋友可以参考下哈，

希

望对大家有所帮助

如何让背景图片拉伸填充，

这个问题听起来似乎很简单。

但是很遗憾的告诉大家。

不是

我们想的那么简单。

比如一个容器(

body,div,span

)中设定一个背景。这个背景的长宽值在

css2.1

之前是不

能被修改的。

所以实际的结果是只能重复显示，所以出现了

repeat,repeat-x,repeat-y,no-repeat

这些属

性。就是用来控制背景图片的显示的。所以一般用作背景图片的有

2

类：

1.

是一整张大图，尺寸和区域大小刚好吻合

2.

一个很小的条状图，通过

repeat

后，形成一个很规则的大图背景。

但是

css3

出现以后，这个情况被改善了。

background-size

属性可以让我们之前的希望

成真。

而且这个属性在

firefox

，

chrome

，以及

ie9

上都可以使用。

具体使用方法如下：

背景图尺寸(数值表示方式)

：

代码如下

:

#background-size{

background-size:200px 100px;

}

背景图尺寸(百分比表示方式)

：

代码如下

:

#background-size2{

background-size:30% 60%;

}

背景图尺寸(等比扩展图片来填满元素，即

cover

值)

：

代码如下

:

#background-size3{

background-size:cover;

}

背景图尺寸(等比缩小图片来适应元素的尺寸，即

contain

值)

：

代码如下

:

#background-size4{

background-size:contain;

}

背景图尺寸(以图片自身大小来填充元素，即

auto

值)

：

代码如下

:

#background-size5{

background-size:auto;

}