如何确保 Text 始终位于 Image 之上（即使在调整大小时）？答案

【问题标题】：How to make sure Text always stays on top of Image (even when resizing)?如何确保 Text 始终位于 Image 之上（即使在调整大小时）？
【发布时间】：2016-09-28 05:05:39
【问题描述】：

情况：

我的网站有以下结果：

问题：

我想在 iPad 图像顶部添加内容，以便内容始终位于 iPad 屏幕“内部”（即使调整窗口大小时）。

问题：

如何做到这一点？我用谷歌搜索解决方案，没有人帮助我。是否有一些属性可以使 div 捕捉到图像？

代码：

HTML：

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
            <img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
        </div>
    </div>
</section>

CSS：

section {
    height: 100vh;
    overflow: hidden;
    padding: 0%;
}

.rightPage {
    margin-top: 0%;
    height: 100vh;
    width: 50vh;
}

img {
    max-width: 100%;
    max-height: 95%;
    display: block;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-left: 0;
}

【问题讨论】：

请添加您的代码，对您有帮助。
@frnt 添加 atm。

标签： javascript html css image text

【解决方案1】：

据我了解，您需要 iPad 图像中的文本。如果是这种情况，请尝试将您的图像设置为 background-image ：

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
           Some Text ...
        </div>
    </div>
</section>

CSS。

.rightPage {
     background-image: url("Vendors/Images/iPadContact.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    max-width: 517px;

}

为max-width添加正确的图片宽度

【讨论】：