如何在 html 中的图像上粘贴文本（放大/缩小，更改分辨率）？答案

【问题标题】：How to stick text over an image in html (zoom in/out, change resolution)?如何在 html 中的图像上粘贴文本（放大/缩小，更改分辨率）？
【发布时间】：2019-07-22 20:43:31
【问题描述】：

我正在尝试在图像上粘贴文字。当我放大/缩小时，文本会朝着与图像不同的方向前进，但我希望它们一起移动。我也在对某些分辨率使用媒体查询，但我不能对每个给定的分辨率都使用媒体查询。那么我该如何解决这个问题呢？

我尝试使用媒体查询和容器的绝对/相对位置。

<div class="container-fluid test img-responsive">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="text-center col-md-6 waben">
                            <img class="wabeeins pull-left img-responsive" src="https://i.ibb.co/f23d7qk/Artboard-1.png"
                                height="298.39" width="344.56" id="wabeone" alt=wabe1>
                            <div class="firsttext">
                                <h1>Test <br> test <br> test!</h1>
                            </div>
                        </div>          
                </div>
            </div>
        </div>
    </div>
</div>
</div>

@media (min-width: 1700px)
{
  .wabeeins{
    position: absolute;
    margin-top: 3%;
    margin-left: -8%;
    z-index: 5;
  }

  .firsttext {
    z-index: 10;
    position: absolute;
    margin-top: 12%;
    right: 32%;
    font-family: $font;
    color: $white;
    font-size: 30px;
    z-index: 100;
  }
}

我曾尝试在不使用引导程序的情况下使用它，并且效果很好，但我仍然无法弄清楚如何使用引导程序完成工作。

我希望同时向同一个方向移动文本和图像。我还希望对每个给定的分辨率都有一个响应式布局，因为我无法使用@media 处理每个分辨率...（例如，当有人缩小浏览器大小时）

【问题讨论】：

您正在混合 BS3 和 BS4 样式供参考
解决了这个问题，并没有改变我的问题。此外，本教程tutorialrepublic.com/faq/… 在没有引导程序的情况下工作。使用上述代码时，它没有按预期工作。有什么我想念的吗？

标签： html css angular bootstrap-4

【解决方案1】：

为父 div 写入相对位置，为子 div 写入绝对位置。如果您需要中心位置添加变换属性。您可以将此代码用于所有分辨率。

HTML

<div class="container-fluid test img-responsive">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="text-center col-md-6 waben">
                            <img class="wabeeins pull-left img-responsive" src="https://i.ibb.co/f23d7qk/Artboard-1.png"
                                height="298.39" width="344.56" id="wabeone" alt=wabe1>
                            <div class="firsttext">
                                <h1>Test <br> test <br> test!</h1>
                            </div>
                        </div>          
                </div>
            </div>
        </div>
    </div>
</div>
</div>

css

.waben{
  position: relative;
  display: inline-block;
}
.firsttext{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
}
img{
  max-width:100%;
}

【讨论】：