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

最新推荐文章于 2024-10-09 08:55:16 发布

尼古·拉斯

最新推荐文章于 2024-10-09 08:55:16 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

文章标签：背景图片

本文链接：https://blog.youkuaiyun.com/gbwine/article/details/95894905

本文介绍了在Vue项目中如何实现背景图片铺满全屏并居中的方法，通过在全局样式文件global.styl中使用CSS3的background-size: cover属性，配合设置背景图居中显示，达到理想效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景图：

背景图尺寸信息：

新建全局样式文件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/