获取文本以显示在图像上

Question

我希望我的文字显示在图像底部的图像上。我可以让它工作，但当我缩放页面时，文本移出div（图像下方）。我希望它在缩放页面时保持在同一个位置。

HTML

<div class="header">
  <img src="images/ct.jpg" class="info-image">
  <p class="HeaderText">Canterbury Tales<p>
</div>

CSS

.info-image {
width:100%;
position:relative;
}

.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
}

网站：explorecanterbury.co.uk

通过点击坎特伯雷故事建设

可以找到div

Answer 1

你有一些问题：

• 您需要使用<p>关闭</p>。
• 在position: relative上使用.header。

喜欢这个吗？

＆＃13;

＆＃13;

.header {
  position: relative;
  width: 500px;
}
.info-image {
  max-width: 100%;
  position: relative;
  display: block;
}
.HeaderText {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 0;
  right: 0;
  transform: translate(0, -50%);
  font-size: 3em;
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="header">
  <img src="//placehold.it/500" class="info-image">
  <p class="HeaderText">Canterbury Tales</p>
</div>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

您可以将其设置为img元素，而不是将其设置为.header元素 .header { position: relative; background-image: url(//placehold.it/200x100); width: 200px; height: 100px; } .HeaderText { position: absolute; bottom: 0; margin: 0 0 10px 10px; }的背景图片。这样，您可以确保文本始终位于图像的顶部。

有关您为什么要这样做的更多信息here。

＆＃13;

＆＃13;

<div class="header">
  <p class="HeaderText">Canterbury Tales</p>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 3

为图像提供较低的z-index，然后是文本：

.info-image {
width:100%;
position:relative;
z-index: 1;
}

.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
z-index:2;
}

如果这不起作用，请尝试为图像提供绝对位置，将文本设置为相对位置。