在中间底部填充背景图像上的内容

Question

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

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

Answer 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，看看他们是如何做到的。

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