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保留为正文文本本身的一部分？

即。

#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的顶部添加一些额外的填充来向下推文本，以便为图像本身留出空间。

Answer 2

为您的位置图像做顶部中心。

background-position:top;

不需要居中，因为如果第二个空格留空，它会自动居中

CSS的复杂背景纹理

2 个答案: