您好,我想在图像上显示这段文字。我希望文本位于两个人的左侧,并在我的媒体查询中从桌面 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;
}
我试图让它定位为绝对和相对,但是它使页面的其余部分跳到图像下方。任何有关简单问题的帮助将不胜感激。
最佳答案
你快到了......
使figure
position: relative;
和标题绝对定位。
#hero_container figure{
position: relative;
}
#hero_container figure figcaption{
position: absolute;
bottom: 10%;
left: 10%;
}
关于html - 图像停留上的简单 CSS 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29849894/