如何让CSS背景图片忽略section的padding-top？技术实现咨询

我给网站的首个section设置了background-image，为了让里面的首个标题和navbar分隔开，给这个section加了padding-top，但现在背景图片没法覆盖padding-top的区域，只在标题下面显示，请问怎么解决？

我的相关代码如下：

HTML代码 #

<nav>
  <a href="#getting-his-start"><b>Getting his Start</b></a>&nbsp;&nbsp;
  <a href="#cinematic-revolution"><b>Cinematic Revolution</b></a>&nbsp;&nbsp;
  <a href="#experimental-phase"><b>The Experimental Phase</b></a>&nbsp;&nbsp;
  <a href="#logos-made-to-last"><b>Logos Made to Last</b></a>&nbsp;&nbsp;
  <a href="#the-nect-big-thing"><b>The Next Big Thing</b></a>&nbsp;&nbsp;
  <a href="#his-influence-today"><b>His Influence Today</b></a>&nbsp;&nbsp;
</nav>
<section class="start">
  <h2 id="getting-his-start">Getting his Start</h2>
</section>

背景图片CSS #

.start {
  background-image: url(../images/goldenarmamend.png);
  background-position: top right;
  height: 100%vh;
  width: 100%vw;
}

标题间距CSS #

h3 {
  font-size: 1.5em;
  margin-top: 3em;
  margin-bottom: 0.7em;
  text-transform: uppercase;
}

解决方案 #

首先得提一下，你CSS里的height: 100%vh和width: 100%vw是无效写法，百分号和vh/vw不能混用，得改成100vh和100vw，这是基础前提。接下来给你两个实用的方案：

方案1：用box-sizing: border-box统一盒模型 #

这个方法能让padding被算进元素的宽高里，这样你设置的height:100vh就会包含padding-top的部分，背景图片自然就能覆盖整个section了：

.start {
  background-image: url(../images/goldenarmamend.png);
  background-position: top right;
  height: 100vh; /* 修正语法错误 */
  width: 100vw; /* 修正语法错误 */
  box-sizing: border-box; /* 关键：让padding计入元素总宽高 */
  padding-top: 3em; /* 这里填你需要的padding值，比如和h3的margin-top对应 */
}

方案2：调整背景的定位原点 #

如果不想改变元素的盒模型，可以通过修改background-origin属性，让背景图片从元素的最顶部（包括padding区域）开始绘制：

.start {
  background-image: url(../images/goldenarmamend.png);
  background-position: top right;
  height: 100vh; /* 修正语法错误 */
  width: 100vw; /* 修正语法错误 */
  background-origin: border-box; /* 让背景从border区域开始定位，也就是元素最顶端 */
  padding-top: 3em;
}

额外小提示 #

如果你的section不需要占满整个视口高度，把height:100vh换成min-height: [你想要的高度]就行，这样section高度会自适应内容，背景依然能覆盖padding区域。

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