CSS的复杂背景纹理

Question

我有一个CSS背景的复杂问题.看看我在这里的尝试:http://beveragebros.com/bbnew/scroll.html

我所说的背景是副本所在的"羊皮纸".这张羊皮纸不是我习惯处理的简单纹理.通常,我会识别"顶部"和"底部"部分,然后是中间的重复模式.这将允许我根据内容的大小制作自动扩展div.这种情况并非如此简单,因为前75%的模式不会重复.

我知道有更好的方法可以做到这一点,但我已经绞尽脑汁几个小时,似乎无法找到一个好的解决方案.有什么想法吗？

最近一直在玩弄这个:

#body-text {
  background-image:url(images/repeat_scroll.png);
  background-repeat:repeat-y;
  width:730px;
}

#copy {
  position:relative;
  top:-200px;
}

标记:

<div id="body-text">
<img src="images/top_scroll.png" alt="Top" />
<div id="copy">
   Testing Testing Testing Testing Testing
</div></div>

然而,问题是div正文自动扩展,尽管文本没有到达包含div的底部.如果CSS允许具有各种z-indices的多个背景,那将是如此简单.#rippingmyhairout

Answer 1

与其将纹理设置为内容的背景，不如将其设置为容器 div 的背景并将 top_scroll.png 作为正文本身的一部分？

IE

#container {
     background:url(images/repeat_scroll.png) center top repeat-y;
}
#body-text {
    background:url(images/images/top_scroll.png) center top no-repeat;
}

然后把所有东西都放进容器里...

<div id="container">
    <div id="body-text">
        Testing Testing Testing Testing Testing
    </div>
    <div id="bottom-scroll">
        <img id="margarita" src="images/margarita.png" alt="Margarita" />
        <img id="fruit" src="images/fruit.png" alt="Fruit" />
    </div>
</div>

现在#body-text div 的背景图像将隐藏作为容器一部分的repeat_scroll.png 的顶部，使其看起来像top_scroll.png 无缝合并到repeat_scroll.png 中。

您可以在 #body-text 的顶部添加一些额外的填充，将文本向下推一点，以便为图像本身留出空间。