html - 用覆盖整个背景的图像写在容器内

Question

我在 codepen 中有这段代码，我已经创建了一个嵌套容器，在一个容器中我正在加载一个图像，它需要完整的背景并且它是完全响应的，现在我想要的是能够简单地使用另一个容器并编写文本并将其放置在此图像上的某个位置。发生的事情是我添加的所有内容都在完整的封面图片下。现在我知道所有关于使用 css 创建背景图像的知识，但这些并不是真正的完全响应。我想知道是否有可能使用嵌套列。代码在这里:http://codepen.io/spacepirate/pen/LNyxXM

    <div class="row" style="padding-top:100px">
      <div class="col-xs-12">
        <img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive">

        <div class="row">
        <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
     <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

Answer 1

你说:

write text in it and place it somewhere on this image

如果你想把它放在某个地方，那么使用 position:absolute;用于您的文字，并保持您现在的形象。

或者试试这个:

<img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive" style="position:absolute;width:100%;">

DEMO