html - 图像停留上的简单 CSS 文本

Question

您好，我想在图像上显示这段文字。我希望文本位于两个人的左侧，并在我的媒体查询中从桌面 View 移动到平板 View 时与图像保持比例

这是我的HTML

<figure><img src="Sources/USE/colors.png">

    <figcaption><h1>Your P<span class="orange">a</span>rtner in<br><br><span class="all"="colorstxt"><span class="green">C</span><span class="yellow">o</span><span class="orange">l</span><span class="red">o</span><span class="pink">r</span><span class="purple">s</span></h1></figcaption>

    </figure>

这是我的 CSS

#hero_container figure{
    position: static;
    }   

#hero_container figure figcaption{
    position: relative;
    top: 200px;
    left: 100px;
    }

我试图让它定位为绝对和相对，但是它使页面的其余部分跳到图像下方。任何有关简单问题的帮助将不胜感激。

Answer 1

你快到了......

使figure position: relative; 和标题绝对定位。

#hero_container figure{
    position: relative;
    }   

#hero_container figure figcaption{
    position: absolute;
    bottom: 10%;
    left: 10%;
    }