2

我正在使用 Twitter Bootstrap 创建一个主页，我想创建一个“英雄形象”（不使用 bootstrap 的英雄单元。）我想要在页面顶部放一张大图片，你可以在上面放文字。您不能使用 img 标签，因为您键入的任何标题都会出现在图像下方。然后我尝试使用带有背景图像的div：，但是图像不会调整以适应浏览器，也不会出现整个图像，它只是在文本后面显示它的一部分。我尝试手动设置 div 大小，但我希望图像自动调整到浏览器。

4

2 回答 2

2

这是一个使用绝对定位作为标题的简单解决方案。

我已将标题的文本居中，您的需求可能需要我提供的内容以外的内容。

容器<div id="hero">采用其包含的元素、图像和标题的大小和形状。由于标题是绝对定位的，因此它从文档流中取出，并且 div 现在与其中包含的图像大小相同。添加position: relative;到包含<div id="hero">允许您定位<h2>相对于容器<div id="hero">而不是其他祖先元素，如另一个包含<div>，<body>或<html>。

CSS

#hero {
    margin: 0 auto;
    max-width: 800px;  /* not required for re-sizing */
    position: relative;
}
#hero img {
    max-width: 100%;  /* for re-sizing in browser */
}
#hero h2 {
    position: absolute;
    top: 65%;
    left: 0;
    width: 100%;
    text-align: center;
}

HTML

 <div id="hero">
    <img src="http://lorempixel.com/output/abstract-q-g-800-400-9.jpg" />
    <h2>Some Heading</h2>
 </div>
于 2013-06-15T15:49:33.493 回答
1

您可以随时尝试使用 css z-index 属性

#bg_img {
    position: fixed;
    z-index: -100;
}

z-index 属性指定元素的堆栈顺序。

所以无论你有什么文字/标题，它们总是出现在标题上而不是后面

于 2013-06-15T15:20:39.440 回答