0

我已经为此工作了几个小时，似乎无法理解它。我有三个图像，下面，我希望文本内容位于这些图像之上，但我该怎么做呢？
中间图像是容器 div 扩展时需要重复的图像。

好的，我为我缺乏信息而道歉，这有点晚了，我的想法并不完全正确。我想包含一个包含所有三个图像的容器。此容器的最小高度将是顶部和底部图像。随着内容开始溢出这个最小高度，中间的图像将开始重复以适应更多的高度。

顶部： 替代文字 http://files.droplr.com/files/45544730/INDf3.Page.png

中间重复： 替代文本 http://files.droplr.com/files/45544730/INE5i.Page-Tile.png

底部： 替代文本 http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png

4

7 回答 7

3 
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>

改为提供课程并在您的样式表中处理它

于 2010-03-31T14:02:52.563 回答
2 
<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

给每个div单独background的 CSS 样式。

但我建议，为 text和and
赋予样式。 在这种情况下，您只需要中间图像。backgrounddivbox-shadowborder

于 2010-03-31T13:57:21.047 回答
1

我的解决方案：

我通常这样做：

<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并且您想将顶部50px留空，您将-490px像我一样设置。

祝你好运。

于 2010-03-31T14:10:09.877 回答
0

到目前为止的代码会很有帮助，但我会试一试。

每个图像都需要一个容器。

<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;
}

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

于 2010-03-31T14:05:36.887 回答
0

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

然后它将正常工作。

于 2010-03-31T14:10:19.370 回答
0 
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 规则。

于 2010-03-31T14:10:43.460 回答
0

这是使用您发布的图像的 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>
于 2010-03-31T14:11:43.830 回答