写在一个容器中，图像覆盖整个背景

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

你说：在这

写文本和地方放置这个图像

。如果您想放置它在某个地方，然后使用position:absolute;为您的文字，并保持你的形象像你现在。

或者试试这个：

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

DEMO

Answer 2

你为什么不使用背景图片标签？

background-image：url（“https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1”）;

Answer 3

试试这个

HTML

<div class="row parent-block" style="padding-top:100px"> 
     <div class="col-xs-12 child-image-block"> 
     <img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive"> 
     </div> 
     <div class="row child-content-block"> 
      <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> 
</div> 

CSS

.parent-block { position:relative;} 
.child-image-block { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; z-index:1;} 
.child-image-block img { width:100%;} 
.child-content-block {position:relative; z-index:3;}