时间戳

首页 > 解决方案 > 如何使用支持所有视口的 css 将 html 表单定位在图像的特定部分？

html - 如何使用支持所有视口的 css 将 html 表单定位在图像的特定部分？

问题描述

我的手拿着智能手机有以下图像。我想在表单部分内显示 html 表单，如图所示。在此处输入图像描述

我如何使用 css 实现这个？我需要使用 js/jquery 进行视口和图像大小计算吗？

我只能将内容对齐到中心。

我的html：

<div id="box-search">
      <div class="thumbnail">
          <img src="https://i.imgur.com/9vqPVU6.jpg" alt="">
          <div class="caption">
              <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 
          </div>
      </div>
  </div>

我的CSS代码：

img {
    display: block;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: black;
    font-weight: bold;
}

标签： htmlcss

解决方案

如果您要使用这样的图像并保持其原始尺寸，您可以设置以像素为单位的固定定位值。
设置这些 CSS 属性.caption：

.caption {
  position: absolute;
  color: black;
  font-weight: bold;
  padding: 20px; /* some padding, and below the dimension properties */
  top: 247px;
  left: 205px;
  height: 257px;
  width: 419px;
}

现在，如果您不打算使用固定尺寸，即您的图像将保持比例但在较小的屏幕上会缩小，您可以使用百分比来定位和缩放.caption.

.caption {
  position: absolute;
  color: black;
  font-weight: bold;
  padding: 20px;
  top: 34.5%;
  left: 17%;
  height: 35.5%;
  width: 35%;
}

在这两种方式中，标题元素（包含表单）都将准确定位在图像的设备屏幕上。

推荐阅读