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标签？

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

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

在容器内写入图像覆盖整个背景

3 个答案: