Bootstrap，h1覆盖在容器内的背景图像上答案

【问题标题】：Bootstrap, h1 overlay on a background image within a containerBootstrap，h1覆盖在容器内的背景图像上
【发布时间】：2017-02-12 02:48:02
【问题描述】：

<div class="row text-center">
    <div class="col-md-12">
    <!--Giant Background Pic-->
    <img class ="bckground" src="images/napaliWall.jpg">
    <h1> Title Text </h1>
    <p> Sand sand sand sand</p>
    </div>
</div>


.bckground{
  background-size: cover;
  background: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  max-height:100%;
  max-width:100%;

}

我的 h1 和 p 没有覆盖在背景图像上。在引导程序的容器中执行此操作的正确方法是什么？我不想将文本设置为固定位置，因为我担心它可能会影响我的移动网页的响应能力。我只是想让我的背景图像填充它所在的行列容器，并且必须在它上面添加文本。我的 HTML 代码被包裹在一个 div 容器中，只是没有显示出来。

【问题讨论】：

如果您创建了一个minimal reproducible example，那就太好了。现在你的例子还不完整。我们不知道您使用的是 Bootstrap v3 还是 v4，而且 <img> 资产也是未知的。请提供绝对路径，以便正确加载。使用 sn-p 工具（<> 按钮）或 sn-p 网站 - jsFiddle、codepen 等

标签： html css twitter-bootstrap background overlay

【解决方案1】：

你应该在css中将图片设置为背景

like background-url: (url to image)

【讨论】：