Question

我正在SquareSpace的这个网站上工作，我知道如何将图像叠加在一起并使它们响应，但我对文本没有成功。我希望此文本与心脏图像一起调整为屏幕大小。

我知道使用“vh，vw，vmin，vmax”相应地调整大小，但是，当我使用视口单元时，它几乎就像大小减少了两倍于页面上其余内容的速度一样

这就是我所拥有的（当然缺少方形空间设置CSS样式）：

<style>
  .kppr
  {
    margin-top: -8%;
    margin-left: 8%;
  }
  .kppr p
  {
    color: #89d4e8;
    font-size: 400%;
    font-weight: bold;
  }
</style>

<div style="position: relative; top: 0; left: 0;" class="kppr">
  <p>
    kids play &nbsp&nbsp&nbsp&nbspparents relax
  </p>
  </div>
  <div style="position: absolute; top: 42%; left: 40.5%;" class="heart">
    <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="Kids play, parents relax"/>
    </div>

如何使文字和图像响应？

0 个答案: