如何将文本位于底部的响应位置

Question

我目前正在网站上处理视差效果，我需要一个段落在页面底部中途。但由于段落必须以字体大小响应，我不太确定我是否需要将文本转换为图像或坚持使用纯文本来解决此问题？看起来像图像的解决方案可以让我用纯JavaScript做一些技巧。

一般来说，我觉得控制页面上的文字非常困难，特别是对于文本可以出现在不同位置的视差。也许有一些很好的工具用于此目的？

https://jsfiddle.net/pt88w26u/2/

HTML：

<section id="first">
  <div>
    <p>This is a test</p>
  </div>
</section>
<section id="second">
</section>

CSS：

html,
body {
  height: 100%;
  color: #fff;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

section {
  min-height: 100%;
}

#first {
  background-color: #000;
}

#second {
  background-color: #ddd;
}

section > div {
  top: 86%;
  font-size: 5em;
  position: absolute;
  transform: translate(-50%, 0%);
  left: 50%;
}

Answer 1

您只能使用css执行此操作。

要执行此操作，请将div的位置和变换设置为 bottom:0px; transform:translate(-50%,50%);

并删除p标签上的默认边距。

https://jsfiddle.net/pt88w26u/5/