我正在使用 Twitter Bootstrap 创建主页，并且我想创建一个“英雄图像”(不使用 Bootstrap 的英雄单元。)我想要在页面顶部有一张大图片，您可以在其中放置文本在。您不能使用 img 标签，因为您键入的任何标题都会显示在图像下方。然后我尝试使用带有背景图像的div:，但是图像不会调整以适合浏览器，也不会显示整个图像，它只显示文本后面的一部分。我尝试手动设置 div 大小，但我希望图像自动适应浏览器。
最佳答案
这是一个使用绝对定位标题的简单解决方案。
我已将标题文本居中，您的需求可能不同于我提供的内容。
容器<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>
关于image - 允许背景图像表现得像 <img>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17124975/