试图让我的标题图片覆盖CSS

Question

如何移除边缘或增强标题图像以覆盖左，上和右。

CodePen上的项目链接：http://codepen.io/ArizonaWarriorOne/pen/mJjBQM

.masthead-heading,
.masthead-intro {
  text-align: center;
}
.masthead {
  padding: 10em 0;
}
.masthead-intro {
  margin-bottom: 0.1em;
}
.masthead-heading {
  margin-top: 1.2em;
}
.masthead {
  background-image: url('http://jmdarter.com/wp-content/uploads/2012/11/Sonoran-Sunset-Flare.jpg');
  background-size: cover;
  border-top: 2em solid #FF6600;
  background-position: center;
 }

<header class="masthead">
  <p class="masthead-intro">Hi, I'm</p>
  <h1 class="masthead-heading">Tim</h1>
    
  </header>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>

Answer 1

body元素有8px margin around it by default in most browsers，因此页面周围会出现额外的空白区域。

将以下CSS规则添加到您的codepen中，以消除body元素默认的额外空间：

html, body {
  margin: 0;
}

更新了CodePen：http://codepen.io/maxlaumeister/pen/jPpYKm

完整代码：

＆＃13;

＆＃13;

html, body {
  margin: 0;
}

.masthead-heading,
.masthead-intro {
  text-align: center;
}
.masthead {
  padding: 10em 0;
}
.masthead-intro {
  margin-bottom: 0.1em;
}
.masthead-heading {
  margin-top: 1.2em;
}
.masthead {
  background-image: url('http://jmdarter.com/wp-content/uploads/2012/11/Sonoran-Sunset-Flare.jpg');
  background-size: cover;
  border-top: 2em solid #FF6600;
  background-position: center;
 }

＆＃13;

<header class="masthead">
  <p class="masthead-intro">Hi, I'm</p>
  <h1 class="masthead-heading">Tim</h1>
    
  </header>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>

＆＃13;

＆＃13;

＆＃13;