html - 可重复的背景在顶部造成间隙

这是我得到的结果，我使背景的中间部分可重复，因此当我添加文本时它会垂直拉伸，但是由于某种原因，当我添加文本时，它会在顶部和中间部分之间形成间隙。

.resumetop {
    background: no-repeat;
    width: 1178px;
    height: 30px;
    background-image: url("images/resume_top.jpg");
}
.resumemiddle {
    background: no-repeat;
    width: 1178px;
    height: 100%;
    background-image: url("images/resume_middle.jpg");
}
.resumebottom {
    background: no-repeat;
    background-image: url("images/resume_bottom.jpg");
    width: 1178px;
    height: 38px;
}

<div class="resumetop">
</div>
<div class="resumemiddle">
    <p class="resumetext">
        dksjfgjhsfguysdg
    </p>
</div>
<div class="resumebottom">

</div>

任何帮助表示赞赏。

最佳答案

这是由您的p标签引起的。

请尝试：

p {
 margin: 0;
}

或者，如果您想完全避免此类问题，请尝试：

*{
 margin: 0;
 padding: 0;
}

这将删除所有默认边距和填充。

附言请下次添加一个适用于所有人的img网址，而不是本地存储的网址。

p {
  background-color: red;
  margin: 0;
  width: 150px;
}

.resumetop {
    background: no-repeat;
    width: 1178px;
    height: 30px;
    background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
}
.resumemiddle {
    background: no-repeat;
    width: 1178px;
    height: 100%;
    background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
}
.resumebottom {
    background: no-repeat;
    background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
    width: 1178px;
    height: 38px;
}

<div class="resumetop">
</div>
<div class="resumemiddle">
    <p class="resumetext">
        dksjfgjhsfguysdg
    </p>
</div>
<div class="resumebottom">

</div>

关于html - 可重复的背景在顶部造成间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49556772/