假设用户显示器的宽度是1000px,然后用background-image设置一张宽度为800px的背景图片,
然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的,
怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%,也就是拉伸这张背景图片。
.di{
120%;
height:91px;
position:relative;
z-index:1;
background:url(../img/foot-bg.jpg);
background-repeat:no-repeat;
}
.di{
120%;
height:91px;
position:relative;
z-index:1;
background:url(../img/foot-bg.jpg);
background-repeat:no-repeat;
background-size:cover;
}
,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。
.di{
120%;
height:91px;
position:relative;
z-index:1;
background:url(../img/foot-bg.jpg);
background-repeat:no-repeat;
background-size:90% 91px;
}
可以直接设置高度跟宽度这样可以看起来舒服点