html - 在底部制作一个div内容到 "bleed"(或者阻止背景图片渲染)

Question

好吧，基本上我有:

<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 像素处渲染其背景。知道我该怎么做吗？

Answer 1

如果您稍微更改了标记并使用了 javascript，则可以使用仅包含背景的绝对定位的 div 来完成。然后onload，设置#repeating-background's height 为(#content's height - 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);
});