可重复的背景在顶部产生差距

Question

这是我得到的结果，我使背景的中间部分可重复，所以当我添加文本时它会垂直拉伸，但出于某种原因，当我添加文本时，它会在顶部和中间部分之间创建一个间隙。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

感谢任何帮助。

Answer 1

由您的p标签引起的。

尝试：

p {
 margin: 0;
}

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

*{
 margin: 0;
 padding: 0;
}

这会消除所有默认边距和填充。

聚苯乙烯。请下次添加适用于所有人的img网址，而不是本地存储的网址。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;