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

html-css09

制作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>

具体使用方法如下:

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

代码如下:

#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

}