Question

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

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

<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处理每个分辨率……（例如，当某人缩小浏览器尺寸时）

Answer 1

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

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%;
}

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

1 个答案: