使div內容在底部“出血”（或阻止渲染背景圖像）

Question

Okey，所以基本上我有：

<div id="content">
  ... content of arbitrary size ...
</div>
<div id="content_bottom"></div>

樣式是：

#content {
    background: transparent url(content_tile.png) center top repeat-y;
    width: 800px;
}
#content_bottom {
    background: transparent url(content_bottom.png) center top no-repeat;
    height: 200px;
    width: 800px;
}

content_tile.png是800x1圖像（垂直平鋪），具有透明度。 content_bottom.png是800x200圖片。

基本上，我需要用content_bottom.png圖像替換僅底部的#content背景圖像。 #content的負邊距幾乎可以工作，但是由於兩個圖像都是透明圖像，因此它們會重疊，因此不應該發生。

我認為我需要使#content不要在其底部的最后200 #content處渲染其背景。 知道我該怎么做嗎？

Answer 1

如果您稍微更改了標記並使用了javascript，則可以使用絕對定位的div（僅包含背景）來完成此操作。 然后加載，將＃repeating-background的高度設置為（#content的高度-200px）：

的HTML

<div id="content">
    <div id="text">
         This is where your content would go
    </div>      
    <div id="repeating-background"></div>
</div>

的CSS

#content {
   position: relative;
   width: 800px;
   background: url(content_bottom.png) left bottom no-repeat;
}

#text {
   position: relative;
   z-index: 2;
}

#repeating-background {
   position: absolute;
   z-index: 1;       
   top: 0;
   left: 0;       

   width: 800px;
   height: 1px;

   background: url(content_tile.png) left top repeat-y;
}

Javascript（jQuery）

$(document).ready(function() {
    $('#repeating-background').height($('#content').height() - 200);
});

Answer 2

創建一個嵌套在#content中的第三個div，高度為200px。