Vue登录页面自适应背景图片不显示问题求助

问题原因 #

• .background是空div元素，块级元素的高度默认由内部内容撑开，没有内容时高度会直接变为0；即便html和body设置了100%宽高，这个div也不会自动继承父级的高度属性。
• 仅设置background-size: cover无法让空div获得自适应的宽高，必须明确指定能关联到视口或父容器的尺寸规则。

解决方案 #

方案1：固定定位占满视口 #

直接让背景div固定在视口，完全覆盖页面：

.background {
  background: url("./images/background.svg");
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 将背景置于登录表单下方，避免遮挡交互 */
}

方案2：Flex布局让div自动占满父容器 #

如果背景div是根组件（#app）的直接子元素，给父容器设置flex布局：

#app {
  min-height: 100vh;
  display: flex;
  margin: 0;
}
.background {
  background: url("./images/background.svg");
  background-size: cover;
  flex: 1;
  width: 100%;
}

方案3：继承父级高度 #

确保所有父级容器都具备100%高度，让背景div继承高度：

html, body, #app {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}
.background {
  background: url("./images/background.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Florian Haberfellner