background-image 背景图片的设置

Posted 2020-10-15 蓝心高飛

  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;

}