怎么用css把背景图片拉伸 不是平铺

html-css018

怎么用css把背景图片拉伸 不是平铺,第1张

1、首先准备一张设置为背景的图片,这边准备的是一张650px*347px的图片。

2、然后建立一个html文档,将它和背景图片放到一个文件夹中。

3、编辑html文档,这边建立一个div,设置宽度为700px,高度跟背景图一样,为347px。

4、就给div设置背景图片。

5、在浏览器中预览会发现图片平铺了,这不是想要的效果。

6、然后可以给div再加上属性,-moz-background-size:100% 100%background-size:100% 100%。

7、这样设置后就会发现背景图片拉伸至100%了。

background:url(../../config/img/Title.png) no-repeat不重复

background:url(../../config/img/Title.png) repeat-x横向平铺

background:url(../../config/img/Title.png) repeat-y竖着铺

什么不加就是横竖平铺

如果你是想拉伸的话,竖着切一张几个像素宽的背景图(比如说宽2px,高990px这样的一张图),然后设置repeat-x,横向平铺。这样看起来就像是一张大图。这种方法适用于纵向渐变的背景。

no-repeat: 即无论背景图片的大小, 只显示单个背景图片

repeat: 指背景图片横向和纵向重复连续显示

repeat-x: 指背景图片横向重复连续显示

repeat-y 指背景图片纵向重复连续显示例: 查看本站css文件,可以看到以下代码:

body {

font: normal 12px/1.5 Georgia, sans-serif

text-align:left

background:#444 url(images/bodybg.jpg) repeat-y

}

可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.