Vue基础技术|背景图铺满全屏效果

背景图：

背景图尺寸信息：

新建全局样式文件global.styl，并编写全局样式

查看效果图：

问题：通过背景图原图比对发现显示效果不全。

如何实现背景图的全屏呢？可以通过css3提供的background-size: cover属性

设置cover属性后的效果如下：

然后再设置背景图居中显示就可以了

完整样式文件代码：

html, body{
  margin: 0
  padding: 0
  width: 100%
  height: 100%
}

body{
  background-image: url(../images/beijing.jpg)
  background-size: cover
  background-position: center
  font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
  color: #4d4d4d
  -webkit-font-smoothing: antialiased // 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服
  font-weight: 300
}

推荐在线图片压缩神器：https://tinypng.com/