html - 在图像上输入文本框

问题描述

如何将文本框放在图像上，并将文本框固定在图像上。

当我调整大小时，图像锚定丢失。

文本框应按比例缩放到图像

body, html {
    width: 100%;
    height: 100%;
  }


/* Container holding the image and the text */
.bg_img {
    /* Control the height of the image */
   height: 1500px;  
   background-repeat: no-repeat;   
   position: relative;
  }  

.innerContainer {
    position: absolute;
    left: 20px; 
    width: 100%;  
    height: 100%;
}

/* Full-width input fields */
input[type=text], input[type=password] {    
    position: absolute;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

<div class="myContainer">
        <div class="bg_img" style="background-image: url(img/Aufm.jpg)">        
            <div class="innerContainer">
                <input type="text" placeholder="h" name="l1" style="left: 20px; top: 320px; width: 80px; transform: rotate(90deg);">
                <input type="text" placeholder="b" name="l1" style="left: 20px; top: 220px; width: 80px; transform: rotate(90deg);">
                <input type="text" placeholder="h2" name="l1" style="left: 300px; top: 320px; width: 80px;">
            </div>        
          </div>
      </div>

图像大小不同。

标签： htmlcssimage

html - 在图像上输入文本框

问题描述

解决方案

推荐阅读