小小招数之CSS背景图全屏布局

记录一个小招数,

做个全屏展示图片的页面.

<section class="welcome"></section>

CSS采取absolute定位,四个方位均为0,背景图的background-size为cover

代码如下:

.welcome{
  width:100%;
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-image: url('../assets/pic.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}