backgroundimage 背景图片的设置

  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;

}

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注