1
好的，也許我略微失去了想法，但我試圖重新創建一個主頁，將2個背景圖像合併到我的CSS中。我試圖使用一個作爲頂部圖像，一個作爲底部圖像，中間是一張有鏈接和圖像的表格。然而，出於某種原因，我很難將它們拉在一起，使它看起來像一個平滑的圖像。爲什麼我的CSS不合作？
例如，我的容器類（如下所示）只在topBox類周圍放置邊框，而不是整個容器div。我希望所有3個div都有一個邊框（來自容器類），使其看起來像是一個圖像。這是我的HTML和CSS。
我在做什麼錯？在此先感謝您的幫助！
#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;
}<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>
是的，它是 - 謝謝你。只要我發佈這個問題，我意識到這就是它。我忘了刪除它。感謝您的答覆！ – kjkentner