Question

我希望在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
    }

有人能帮助我吗？

Answer 1

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

我从.jumbotron-img img移除了绝对位置，因为它似乎不需要它并导致.jumbotron-img高度崩溃，因此绝对定位的子元素无法正常运行定位得当。

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

1 个答案: