用背景图像上的内容填充中间底部答案

【问题标题】：Fill middle-bottom with content on a background image用背景图像上的内容填充中间底部
【发布时间】：2012-03-03 09:27:40
【问题描述】：

我会做以下事情：我有一个背景图像（顶部中心），我会用内容填充它的中底部。我会做类似http://glocalventures.org/ 的事情。注意：它可以调整大小！

我怎样才能做出这样的事情？我使用 Zurb Foundation 作为 CSS 框架。谢谢！

【问题讨论】：

【解决方案1】：

我不太确定你在这里问什么。我假设您正在谈论制作与本网站类似的背景图片？

通过 CSS 控制背景图像/背景位置。你可以这样做：

body {
background-image:url(../images/bg.jpg);
background-position: top center ;
background-repeat:none;
}

或者你可以使用像素

body {
background-image:url(../images/bg.jpg);
background-position: 100px 100px ;
background-repeat:none;
}

或者如果你想要百分比

body {
background-image:url(../images/bg.jpg);
background-position: 50% 50%;
background-repeat:none;
}

要使其可调整大小，您可以使用此 CSS 属性：

background-size:100% 100%;

*注意这是一个 CSS3 属性，在某些旧版浏览器中不起作用。

如果这不是您要找的。您可以右键单击他们的网站，通过源代码查看他们的 CSS，看看他们是如何做到的。

【讨论】：

【解决方案2】：

将图像设置为顶部居中：

yourImage{
   background: #ffffff url(../images/bg.jpg) top center no-repeat;
}

设置文本的去向：

yourText{
    position: absolute;
    bottom: 5px;
    text-align: center;
}

以及用于此的 HTML 代码：

<div id="yourImage">
    <p id="yourText">some text...</p>
</div>

【讨论】：