html - 在图像上放置 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>