制作html网页时如何使用CSS使背景图片拉伸(

html-css029

制作html网页时如何使用CSS使背景图片拉伸(,第1张

比方说背景图片铺满整个div(不管多大):

<div style="width:320px height:240px background:url(图片url) no-repeat center / 100% 100%"></div>

如果想让图片保持原始的长宽比例不变形(多余部分自动裁去):

<div style="width:320px height:240px background:url(图片url) no-repeat center / cover"></div>

如果想保持比例的同时又要显示出完整的图片(div会出现留白):

<div style="width:320px height:240px background:url(图片url) no-repeat center / contain"></div>

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%了。