css - 如何使用 bootstrap 将 div 略微放置在图像上

Question

div nudged slightly over an image

我在上面附上了我正在尝试做的事情的图片......我想在图像上稍微放置一个 div - 这很容易做到 - 但我想使用 Bootstrap 来实现。或者，尽可能多地使用 Bootstrap 网格，以便这两个对象完全响应。

这是执行我想要的代码，但我想使用 bootstrap 来执行此操作——使用 bootstrap 是我的主要目标。

<div style="position:relative">
        <img src="img/1.jpg" alt="" />
        <div style="position:absolute;left:25%;top:50%;border:solid;">
            <h1>This text is on top of the image</h1>
        </div>
    </div>

提前致谢。

Answer 1

我尝试用 Bootstrap 来实现，这是我的代码。我没有为超小型设备编写媒体查询，因为这取决于您希望如何在该设备上设置它的样式。

在代码笔上:

https://codepen.io/jaspal9755/pen/WKvLBX?editors=1100

html

<div class="container-fluid">
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-6">
        <img class="img-fluid" src="https://images.pexels.com/photos/2755/restaurant.jpg?auto=compress&cs=tinysrgb&h=350" alt="" />
      </div>
      <div class="col-sm-6">
        <div class="wrap-heading">
            <h1>This text is on top of the image</h1>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

*{
  padding:0;
  margin:0;
}
.wrapper{
  position:relative;
  padding:10px;
}
h1{
  border: 2px solid;
  font-size:30px;
  padding:15px;
}
.wrap-heading{
  position:absolute;
  top:40%;
  left:-25%;
}

@media(min-width:767px) and (max-width:992px){
  h1{
    font-size:25px;
  }
}
@media(min-width:576px) and (max-width:768px){
  h1{
    font-size:20px;
  }
}