使div内容在底部“出血”(或阻止背景图像渲染)

如果您稍微修改了标记并使用javascript,那么您可以使用一个绝对定位的div来完成它,该div只包含背景。然后加载,将“重复背景高度”设置为(内容高度-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);
});

创建第三个div,嵌套在#content中,高度为200px。