好吧，也许我稍微失去了理智，但我试图重新创建一个将2张背景图片合并到我的CSS中的主页。我尝试使用一个作为顶部图像，一个作为底部图像，中间是一个包含链接和图像的表。但是，出于某种原因，我很难将它们全部拉到一起，使它看起来像一张平滑的图像。
例如，我的容器类（如下所示）只在topBox类周围放置一个边框，而不是整个容器div。我希望所有3个div都有一个边框（来自容器类），所以它看起来好像是一个图像。这是我的HTML和CSS。
我做错了什么？在此先感谢您的帮助！
HasAttachments #Container {
float:left;
width: inherit;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border:0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
答案 0 :(得分：2)
非常简单的回答，只需删除id #Container的高度就可以了。我希望这就是你在寻找的地方;）
答案 1 :(得分：2)
您已在容器上设置了特定height，因此border只会达到该高度。如果您将高度设置为750像素，它将起作用。
#Container {
float: left;
width: inherit;
height: 750px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border: 0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}<div id="Container">
<div class="boxTop"></div>
<div class="box">
<table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top">
<a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" />
</a>
</td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/become-a-member-sp-1672965733">Become a Member</a></h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/wrapper/?Itemid=203">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" />
</a>
</td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/classes-support">Classes & Support</a></h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/hwdvideoshare/?task=viewcategory&Itemid=166&cat_id=5">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" />
</a>
</td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-tv">Watch the TV Segment</a></h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">
<img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" />
</a>
</td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">Read the Magazine</a></h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="boxBtm"></div>
</div>
答案 2 :(得分：2)
这可以简单得多 - 你只需要一个包装div，而不是三个。 （您也不应该使用表格进行布局，但这是一个完整的其他主题。现在，如果您将table放在内容p标记的位置，这将有效。）
以下是如何使用更少的代码粗略地获得所需的视觉效果：
.box {
width: 300px;
border: 1px solid;
border-radius: 0 0 9px 9px;
/* You can specify multiple background images like this: */
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
/* first position goes with the first image url and vice versa */
background-position: top, bottom;
/* 130px padding on top to create room for the "lifestyles" logo
20px on the sides for breathing room
50px at the bottom to create room for the green gradient
tweak these values till you like the spacing */
padding: 130px 20px 50px;
}<div class="box">
<p>content</p>
<p>content</p>
<p>content</p>
</div>