0

I would do the following: I have a background image (top center) and I would fill its middle-bottom with content. I would do something like http://glocalventures.org/ . Note: it's resizable!

How can I make something like this? I use Zurb Foundation as CSS Framework. Thanks!

4

2 回答 2

0

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

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

于 2012-02-10T23:10:20.463 回答
0

将图像设置为顶部，中心：

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>
于 2012-02-11T09:40:45.267 回答