background-image 背景图片的设置

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;

}

上一篇:Tomcat架构解析(四)-----Coyote、HTTP、AJP、HTTP2等协议


下一篇:Captain Technology INC浅谈新能源汽车的未来