实现DIV标签背景充满整个浏览器可视窗口

原创于 2019-11-18 10:51:26 发布 · 801 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍在VUE项目中如何使用CSS的VH单位和background-size属性，轻松实现全屏背景效果，包括背景图片的自适应和高度设置。

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

通常，我们想要整个浏览器窗口都是一个背景是通过设置body来实现的，但是在VUE中，这个方式过于繁琐，所以我们可以通过设置路由的DIV背景实现窗口。
这里用到了CSS三中的新单位VH；

.hello{
  background: url('../assets/bg.png') no-repeat center 100%;
  background-size: 100% 100%;
  height: 100vh;
}

通过background-size控制背景图的大小；
再通过height：100VH使该DIV高度=浏览器可视高度。
下面是实现的效果：在这里插入图片描述