3个div作为背景
我已经为此工作了几个小时，但似乎无法理解它。 我有下面三张图片，我希望文本内容位于这些图片之上，但我该怎么做？
中间的图像是随着容器 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
I've been working on this for a couple of hours and can't seem to wrap my head around it.
I have three images, below, and I would like the text content to sit on top of these, but how do I do it?
The middle image is the image that would need to repeat as the container div expands.
Okay, I do apologise for my lack of information, it's a little late and I'm not exactly thinking straight. I would like to comprise a container with all three images. The minimum height of this container would be the top and bottom image. As contents starts to overflow this minimum height, the middle image would start to repeat to accommodate for more height.
Top:
alt text http://files.droplr.com/files/45544730/INDf3.Page.png
Middle repeating:
alt text http://files.droplr.com/files/45544730/INE5i.Page-Tile.png
Bottom:
alt text http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
相反，提供类并在样式表中处理它
Give class instead and handle it in your stylesheets
为每个
div提供单独的backgroundCSS 样式。但我建议，
为文本
div赋予background样式，以及box-shadow和border。在这种情况下，您只需要中间图像。
Give each
divseperatebackgroundCSS styling.But I would suggest,
Give
backgroundstyling to the textdiv, along withbox-shadowandborder.In this case, you will need only the middle image.
我的解决方案：
我通常这样做：
css：
通常，div 的底部很小，可以将其留空（为整个设计添加间距）。另外，负的 margin-bottom 大小应该是： -(
height-what_you_want_to_remain_empty) - 即如果您的.box .header图像具有540px并且您希望将顶部50px留空，您将像我一样设置-490px。祝你好运。
my solution:
I usually do it like this:
css:
usually, bottom of div is so small it's ok to leave it blank (to add spacing to whole design). Also, negative margin-bottom size should be : -(
height-what_you_want_to_remain_empty) - i.e. if your.box .headerimage has540pxand you want to leave top50pxempty, you'll set-490pxas I had.Good luck.
到目前为止，拥有代码会很有帮助，但我会尝试一下。
每个图像都需要一个容器。
--css--
我可能想让第一张图像与最后一张图像的大小相同，并让第二张图像根据需要填充。
Having the code so far would be helpful, but I will give it a whirl.
You are going to need a container for each image.
--css--
I would probably want to make the first image about the same size as the last image and let the 2nd image fill in as needed.
我认为在 Seth M 的回答中，您需要提供顶部（头部）和头部的高度。底部（脚）分区。
然后它就会正常工作。
i think in Seth M's answer, you need to provide height for top(head) & bottom(foot) div.
then it will work properly.
这是一件很巧妙的事情，它将顶部和底部的图片作为图像放在框中，但始终是第一个和最后一个。当然，如果你有边距或填充，它就不起作用，但也尝试这样做：
这应该以一种奇怪的方式为你提供你想要的东西。请注意，较旧的浏览器不支持这些 CSS 规则。
It's a neat thing, which puts the top and bottom pics as images inside the box, but always first and last. Of course it doesn't work if you have margins or paddings, but try doing this too:
That should give you exactly what you want, in a sort of weird way. Beware that older browsers won't support these CSS rules.
这是使用您发布的图像的 HTML/CSS 完整代码。标题部分相当“高”。我认为这是你设计的一部分。
Here's a ful code with HTML/CSS using the images you posted. The header portion is rather 'tall'. I assume it's part of your design.