如何在图像上放置文本框并在调整页面大小时使其保持原位

如何解决如何在图像上放置文本框并在调整页面大小时使其保持原位

我觉得这可能是一个基本问题，但我生疏了，所以我想我会问：

我有一张图片，我需要在图片上放置文本框并将文本框放在特定区域

我知道如何创建文本框并将它们移动到图像顶部，但是当我调整页面大小时，文本框会移动到图像的不同位置。使这些文本框具有响应性并与图像保持对齐的最佳方法是什么（几乎就像文本框被 Photoshop 处理到图像上一样）

这是我的代码：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');

#wrapper {
  position: relative;
  overflow: hidden;
}

img.background {
  width: 80%;
} 

/*Adventureland */
 #label-1 {
  background-color: #4a9a37;
  width: 210px;
  height: 40px;
  padding: 5px;
  position:relative;
  left:80px; top:-700px;
  color: white;
  text-align: left;
 
}

.title-1 {
  font-family: 'Roboto',sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  float: left;
  text-transform: uppercase;
  position: relative; top: -10px; 
  
}

/*Fantasyland */
#label-2 {
  background-color: orange;
  width: 210px;
  height: 40px;
  padding: 5px;
  position:relative;
  left:450px; top:-1070px;
  color: white;
  text-align: left;
 
} 

.title-2 {
  font-family: 'Roboto',sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  float: left;
  text-transform: uppercase;
  position: relative; top: -25px; 
  
}

<div id="wrapper">
  <img src="https://tripadvisor.com/img2/solutions/ekedit.jpg" class="background">

  <!--  Adventureland Start-->
  <div id="label-1">
    <p class="title-1"> <strong> ADVENTURELAND </strong> </p>
   
    
    </div>

<!--  Adventureland End -->

  <!--  Fantasyland Start-->
  <div id="label-2">
    <p class="title-2"> <strong> Fantasyland </strong> </p>
      
   

<!--  Fantasyland End -->

</div>

解决方法

将位置绝对值、顶部和左侧设置为“label-1” % 值将是一种解决方案，但文本框在不同的屏幕分辨率下不会超级响应。我的建议是将图像创建为图像映射；放置文本并使用在线图像映射生成器创建区域（此方法通过将您重定向到另一个页面/选项卡等来帮助您创建可点击的文本框）。该图像将具有响应性，因为它被视为单独的图像。 在不同屏幕分辨率和/或奇怪分辨率下制作响应式页面的另一种方法是将图像制作为 .svg 并将这些文本框添加到 .svg 中作为 或 元素。然后使用以下命令在 HTML 中添加 svg：<object data="~/yourPathHere.svg" type="image/svg+xml"></object>

,

此解决方案使用 % 值作为左侧和顶部，正如另一个答案中所建议的那样。这样做的最大缺点是它不会缩放标签的大小。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');
#wrapper {
  position: relative;
  overflow: hidden;
}

img.background {
  width: 80%;
}


/*Adventureland */

#label-1 {
  background-color: #4a9a37;
  padding: 5px;
  position: absolute;
  left: 6%;
  top: 48%;
  color: white;
  text-align: left;
}

.title-1 {
  font-family: 'Roboto',sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin:0;
}


/*Fantasyland */

#label-2 {
  background-color: orange;
  padding: 5px;
  position: absolute;
  left: 28%;
  top: 7.5%;
  color: white;
  text-align: left;
}

.title-2 {
  font-family: 'Roboto',sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin:0;
}

<div id="wrapper">
  <img src="https://tripadvisor.com/img2/solutions/ekedit.jpg" class="background">

  <!--  Adventureland Start-->
  <div id="label-1">
    <p class="title-1"> <strong> ADVENTURELAND </strong> </p>
  </div>

  <!--  Adventureland End -->

  <!--  Fantasyland Start-->
  <div id="label-2">
    <p class="title-2"> <strong> Fantasyland </strong> </p>
  </div>



    <!--  Fantasyland End -->

  </div>