为何网页中用百分比设宽高时背景图消失，像素则正常显示？

这个问题我踩过好多次坑啦，核心原因是CSS百分比高度的工作逻辑，咱们一点点理清楚：

1. 百分比高度的依赖规则 #

CSS里的height: 100%不是直接取视口高度，而是依赖父元素的明确高度值——父元素必须有一个非百分比、非auto的高度定义，子元素的百分比高度才能生效。

你的代码里犯了两个关键错误：

• 给.container用了HTML原生属性height="100%"和width="100%"，这不是有效的CSS设置，浏览器不会把它当成样式解析；
• 最根本的：.container的父元素（也就是<body>和<html>）默认高度是auto，也就是由内容撑开。没有内容的话，它们的高度就是0，那.container的height:100%自然也会被解析成0，.splash-div高度跟着变0，背景图当然看不到。

2. 你的代码里的小细节问题 #

看你的HTML：

<div class="splash-div" ; style="background-image: url('../../Images/laptopboy.jpg'); background-size: cover; width: 100%; height: 100%;"> </div>

这里.splash-div的标签里多了个多余的分号;，虽然不会直接导致图片消失，但属于无效语法，建议去掉。

3. 修复方案 #

方案一：给根元素设置高度（最常用） #

先给<html>和<body>设置100%高度，让.container有明确的高度依托：

html, body {
  height: 100%;
  margin: 0; /* 去掉浏览器默认边距，避免出现滚动条 */
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
}

然后修正HTML：

<div class="container">
  <div class="splash-div" style="background-image: url('../../Images/laptopboy.jpg'); background-size: cover; width: 100%; height: 100%;">
  </div>
</div>

方案二：用视口单位替代百分比 #

如果你不想修改根元素的样式，可以给.container用vh（视口高度单位），直接让它占满视口高度：

.container {
  width: 100%;
  height: 100vh; /* 100vh = 视口高度的100% */
}

这样不需要设置html/body的高度，.splash-div的height:100%也能基于.container的高度生效。

内容的提问来源于stack exchange，提问作者It's All Live