将div放在图片上

Question

我如何将div与button，form和其他内容放置在像picture这样的图像上。我已经使用以下代码在此图片上放置了文字：

.img-wrap {
  position: relative;
}

.img-wrap h1 {
  position: absolute;
  left: 41.5%;
  bottom: 45%;
  background: rgba(255, 255, 255, 0.9);
  height: 20%;
  width: 17%;
  padding: 3% 0px 0px 2.4%;
  font-size: 2.3vw;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  font-family: Alegreya Sans black;
}

<div class="container-fluid">
  <div class="row">
    <div class="img-wrap">
      <img src="...\images\main-foto.jpeg" class="img-responsive">
      <h1>Funny Island</h1>
    </div>
  </div>
</div>

我试图以相同的方式放置div，但这不起作用。

.img-wrap {
  position: relative;
}

.img-wrap div {
  position: absolute;
  width: 1000px;
  height: 900px;
  background-color: grey;
}

<div class="container-fluid">
  <div class="row">
    <div class="img-wrap">
      <img src="...\images\main-foto.jpeg" class="img-responsive">
      <h1>Funny Island</h1>
      <div>

      </div>
    </div>
  </div>
</div>

感谢您的帮助

Answer 1

将图像添加为.img-wrap上的背景图像。然后，您可以在div内添加按钮，文本等。

.img-wrap {
  position: relative;
  background-image: url( 'http://placekitten.com/500/300' );
  background-size: cover;
  text-align: center;

  padding: 50px;
  color: red;
 }

<div class="container-fluid">
 <div class="row">
    <div class="img-wrap">
        <h1>Funny Island</h1>
         <div>
            <p>Some text here</p>
            <button>Button here</button>
         </div>
    </div>
  </div>
</div>
    

Answer 2

您可以在要包含图像的元素的margin-bottom上使用负号。这会将包含表单内容的元素向上拖动到元素内部，其中包含图像。参见下面的演示：

.image-container {
  height: 50vh;
  background: red;
  margin-bottom: -200px;
}

.content-container {
  height: 150vh;
  max-width: 960px;
  margin: auto;
  background: blue;
}

<div class="image-container"></div>
<div class="content-container"></div>

Answer 3

另一种选择是在img-wrap div中添加顶部或左侧属性，以将其放置在所需位置。

.img-wrap div{
  position: absolute;
  width:1000px;
  height: 900px;
  background-color: grey;
  top:100px;
  left:100px;
 }