如何将 2 个文本框放在流体 img 上？一个左上角，另一个右下角 - 见截图答案

【问题标题】：How to put 2 text box over a fluid img ? one top left, the other bottom right - see screenshot如何将 2 个文本框放在流体 img 上？一个左上角，另一个右下角 - 见截图
【发布时间】：2017-06-24 20:25:29
【问题描述】：

我想要两个文本框覆盖在 bootstrap 4 中标记为 img-fluid 的图像。第一个文本框将在左上角，与图像重叠约 5%。另一个应该在右下角，也重叠了大约 5%。

你可以看这里的截图：layout

我尝试了几种解决方案，但没有一个有效....

这里是html代码：

    <div class="jumbotron jumbotron-fluid jumbotron-no-padding">
        <div class="jumbotron-img">


            <div class="jumbotron-img-caption-top">
                <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1>
            </div>

            <img src="img/wetzlar_full.jpg" class="img-fluid">

            <div class="jumbotron-img-caption-bottom">
                <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1>
            </div>

        </div>
    </div>

这里是css：

    .jumbotron-no-padding {
        padding: 0px!important;
    }

    .jumbotron-img {
            position: relative;
    }

    .jumbotron-img img{
            position: absolute;
            top: 5%;
    }

    .jumbotron-img-caption-top {
            position: absolute;
            top: 0%;
            right: 20rem;
            width: 100%;    
            background-color: #fff1c2;
            padding: 1.5rem;
            padding-left: 21.5rem;
    }
    .jumbotron-img-caption-bottom {
            position: absolute;
            top: 95%;
            left: 20rem;
            width: 100%;    
            background-color: #fff1c2;
            padding: 1.5rem;
    }

    .jumbotron-imgn h2 {
        line-height: 3rem;
        vertical-align: middle
    }

谁能帮帮我？

【问题讨论】：

标签： javascript html css twitter-bootstrap-4

【解决方案1】：

这样的事情怎么样。我将文本包装器设置为 width:auto 并将它们的位置设置为左侧或右侧。我将顶部或底部设置为 0，然后使用 transform:transplateY(-50%) 来补偿文本包装器的高度。

我从.jumbotron-img img 中删除了绝对位置，因为它似乎不需要它，并且它导致.jumbotron-img 高度折叠，因此绝对定位的子元素无法正确定位。

body {
  padding-top:100px;
  padding-bottom:100px;
  margin:0;
}
img {
  max-width:100%;
  height:auto;
}
* {
  box-sizing: border-box;
}
.jumbotron-no-padding {
  padding: 0px!important;
}

.jumbotron-img {
  position: relative;
}

.jumbotron-img-caption-top {
  position: absolute;
  top: 0;
  left: 0;
  width:auto;
  background-color: #fff1c2;
  padding: 1.5rem;
  transform: translateY(-50%);
}
.jumbotron-img-caption-bottom {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  right:0;
  width: auto;
  background-color: #fff1c2;
  padding: 1.5rem;
}

.jumbotron-imgn h2 {
  line-height: 3rem;
  vertical-align: middle
}

<div class="jumbotron jumbotron-fluid jumbotron-no-padding">
  <div class="jumbotron-img">
    <div class="jumbotron-img-caption-top">
        <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1>
    </div>

    <img src="https://dummyimage.com/1920x1080/000000/0011ff" class="img-fluid">

    <div class="jumbotron-img-caption-bottom">
        <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1>
    </div>
  </div>
</div>

【讨论】：