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

Question

我觉得这可能是一个有点基本的问题，但我已经生疏了，所以我想我应该问：

我有一个图像，我需要将文本框放在图像上，并将文本框放在特定区域

我知道如何创建文本框并将其移动到图像顶部，但当我调整页面大小时，文本框会移动到图像的不同位置。让这些文本框响应并保持与图像对齐的最好方法是什么(几乎就像文本框被is到图像上一样)

下面是我的代码：

​

@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>

​

Answer 1

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

Answer 2

按照另一个答案中的建议，此解决方案使用左侧和顶部的%值。这样做的最大缺点是它没有缩放标签的大小。

​

@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>

​