Question

我一直在研究这个问题几个小时，似乎无法绕过它。我下面有三张图片，我希望文字内容能够放在这些内容之上，但我该怎么做呢？中间图像是容器div扩展时需要重复的图像。

好的，我为我缺乏信息而道歉，这有点晚了，我并没有直接思考。我想要一个包含所有三个图像的容器。此容器的最小高度为顶部和底部图像。当内容开始溢出这个最小高度时，中间图像将开始重复以适应更高的高度。

顶部： alt text http://files.droplr.com/files/45544730/INDf3.Page.png

中间重复： alt text http://files.droplr.com/files/45544730/INE5i.Page-Tile.png

下： alt text http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png

Answer 1

TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

代替类并在样式表中处理它

Answer 2

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

为每个div单独background CSS样式。

但我建议，
为文本background以及div和box-shadow提供border样式。
在这种情况下，您只需要中间图像。

Answer 3

我的解决方案：

我通常这样做：

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

的CSS：

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

通常，div的底部非常小，可以将其留空（为整个设计添加间距）。此外，负边距 - 底部尺寸应为： - （height - what_you_want_to_remain_empty） - 即，如果您的.box .header图片有540px并且您想要离开{{1}空，你会像我一样设置50px。

祝你好运。

Answer 4

到目前为止使用代码会有所帮助，但我会给它一个旋转。

每张图片都需要一个容器。

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

- CSS -

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

我可能想要制作与最后一张图像大小相同的第一张图片，并根据需要填写第二张图片。

Answer 5

我认为在Seth M的回答中，你需要提供顶部（头部）和顶部的高度。 bottom（foot）div。

然后它会正常工作。

Answer 6

div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

这是一个很好的东西，它将顶部和底部的照片作为图像放在盒子里面，但始终是第一个也是最后一个。当然，如果你有边距或填充，它不起作用，但也尝试这样做：

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

这应该以某种奇怪的方式给你你想要的东西。请注意旧版浏览器不支持这些CSS规则。

Answer 7

这是使用您发布的图片的HTML / CSS的完整代码。标题部分相当“高”。我认为这是你设计的一部分。

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>

3个div作为背景

7 个答案:

我的解决方案：