CSS

Question

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

Answer 1

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

我已将标题文本集中在一起，您的需求可能需要我提供的其他内容。

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

CSS

<html>

HTML

#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;
}

Answer 2

您始终可以尝试使用css z-index属性

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

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

所以无论你有什么文字/标题，它们都会出现在不在其后面的标题上

允许背景图像的行为类似于<img/>

2 个答案:

CSS

HTML