background-image 背景图片的设置
属性:background-image: url(img/banner.jpg);
1、设置背景图的宽度
background-size: 400px;
2、设置背景图的宽度
百分比,以父元素的百分比来设置背景图的宽度和高度,第一个值为宽度,第二值为高度,一般不设置高度,会变形
background-size: 50%;只显示50%的宽度
background-size: 100%;只显示100%的宽度
background-size: 100% 80%;只显示100%的宽度
3、设置背景图的宽度
背景图完全覆盖背景区域,某些部分也许无法显示在背景区域内
background-size: cover;
4、设置背景图的宽度
以显示完整图片为主,使其高度与宽度完全适应内容区域背景图。注: 但是也会留下空间没有图片。
background-size: contain;
注:这个属性设置背景图的显示是最好的
5、设置背景图不重复
background-repeat:no-repeat;
}