当调整大小时，如何阻止文本偏离位置？

Question

我是一个相当新的编码，已经在它的几个小时现在一个月。在过去的几个小时里，我一直被困在我附上的两张图片中的问题上。我已经尝试了搜索答案和各种方法，如最小宽度，显示：Flex，调整字体大小从自动缩放与vw和使用REM。我只想让我的文本留在笔记本电脑屏幕内，无论屏幕大小，我正在查看它。我知道我可以使用简单的方式，只是photoshop的照片与文本，但我想学习如何做与编码为未来的项目以及。我确实想让图片缩放一点，这样它就可以在手机上观看，例如一个ok大小的手机。你能帮帮我吗？

null

body {
  margin: 0;
  text-align: center;
}

h1 {
  color: #66BFBF;
  font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5vw;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-container {
  background-color: #ccf2f4;
  padding-top: 50px;
  position: relative;
}

.laptop {
  width: 50%;
  height: 50%;
}

<section>
  <div class="top-container">
    <img class="laptop" src="img/laptop.png" alt="cloud-img">
    <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
    <h1>I'm Nhien</h1>
    <h2 class="dreamer">just a gamer with big dreams.</h2>
  </div>
</section>

null

您也可以从www.nhienweb.com访问该网站

Answer 1

您应该将图像添加到节或div的背景中。

对于这个答案，我要将它添加到“背景”部分中。

<section>
  <div class="top-container">
    <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
    <h1>I'm Nhien</h1>
    <h2 class="dreamer">just a gamer with big dreams.</h2>
  </div>
</section>

在HTML中，我已经从HTML中删除了laptop img，并将其添加到CSS中。我会把云定位为绝对的。

下面是此代码的css

body {
  margin: 0;
  text-align: center;
}

h1 {
  color: #66BFBF;
  font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5vw;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-container {
  background-color: #ccf2f4;
  padding-top: 50px;
  position: relative;
}

.top-cloud {
    position: absolute;
    top: 0;
    left: 0;
/* Positioned it relative to the top-container */
}

section {
    background-image: url([your path to img relative to the css file]);
    background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}

如果这无济于事，请评论和问我。