使用background-image仅显示图片顶部，求问题排查建议

嘿，我一眼就发现问题所在啦！你的背景图片只露出顶部，核心原因是CSS里.hero .background-image的高度设置错了。

你当前的CSS代码里，这个类的height属性写的是*height: 100px*——这就意味着背景图片只会显示100像素高的区域，自然只能看到顶部啦。

而你的.hero父元素已经设置了min-height: 100vh（占满视口高度），作为绝对定位的子元素，.background-image需要把高度改成height: 100%，才能继承父元素的高度，让背景图片铺满整个hero区域。

修正后的完整CSS代码如下：

.hero {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  color: #fff;
}

.hero .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 这里是关键修正 */
  background-size: cover;
  z-index: -1;
  background-color: #80a3db;
}

你提到和教程代码完全一致，大概率是不小心把100%写成了100px，这种小笔误真的很容易漏掉~ 改完之后背景图片就能完整展示啦！

内容的提问来源于stack exchange，提问作者Manendar Verma