1

所以这就是问题所在。我有页脚 div。我想为它创建一个漂亮的背景。中间会有一个图像。背景将使用 X bg 图案向左无限延伸 背景将使用 Y bg 图案向右无限延伸 像这样；XXXXXXXXXXXXXXX图像YYYYYYYYYYYYYY

以下代码没有这样做。我究竟做错了什么？

.subcontent {
    min-height:50px;
    width:100%;
    background:#00CC66;
}
.leftcontent {
    float:left;
    min-height:50px;
    width:100%;
    background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
    float:right;
    min-height:50px;
    width:100%;
    background:url(images/bg_rpattern.jpg) repeat-x;
}

  <div class="subcontent">
    <div class="leftcontent">
    </div>
    <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
    <div class="rightcontent">
    </div>
  </div>
4

1 回答 1

0

如果您不知道徽标的确切尺寸并且您的布局是流畅的，这可能会很复杂。

Width: 100% 将 div 拉伸到 100% 并使下一个浮动 div 转到下一行。

为什么不使用 1x6000 像素的大背景图像并在其上进行 y 重复：无论如何，您将用覆盖图像覆盖它的中心，因此无论是否有任何东西都无关紧要。

尝试这个：

<div class="subcontent" style='width:100%; background: url("images/bg_pattern.jpg") repeat-y scroll center top #00CC66; border: 0 none; min-height:50px; text-align:center;'>
  <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
</div>

bgpattern.jpg 是一个很薄的图像......或者如果你需要它是一些漂亮的背景（不仅仅是拉伸一条颜色）然后将其制作为 3000x6000 左右的巨大图像并将其用作背景 - 它仍然会工作相同 - 以徽标为中心，侧面将延伸，直到达到 6000 像素分辨率。

于 2012-05-14T11:23:50.140 回答