将输入字段放入图像中答案

【问题标题】：Putting input fields in an image将输入字段放入图像中
【发布时间】：2018-08-13 18:59:48
【问题描述】：

我有一张像这样的图片：

我想在与文本相关的每一行中添加一个字段，并在图像底部的中心添加一个按钮。即：

First name: [First name here]
Last name:  [Last name here ]
Email:      [Email address  ]

      [Submit button]

我的问题是我不知道怎么做，我试过这样做：

<style>
    .input-image {
        background: url("images/INPUT_GRAPHIC.png");
        min-height: 380px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: unset;
        padding-top: 50px;
    }  
    .btn {
        background-color: #565258;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.9;
        position: absolute;
    }

    .btn:hover {
        opacity: 1;
    }
</style>
<div class="bg-image"></div>
<div class="input-image">
    <form action="/form_to_email.php">
        <div class="input-img">
            <div class="containter">
                <input type="text" placeholder="Enter First Name" name="first_name" class="first-name-input" required>
                <input type="text" placeholder="Enter Last Name" name="last_name" class="last-name-input" required>
                <input type="text" placeholder="Enter Email" name="email" class="email-address-input" required>
                <button type="submit" class="btn">Submit to be inspired</button>
            </div>
        </div>
    </form>
</div>
<div class="info-image">
    <img src="images/INFO_GRAPHIC2.png"/>
</div>

但这并没有正确显示，我该如何在图片中的相应文本旁边添加字段？

【问题讨论】：

您想在图像顶部添加输入字段吗？如果是这样，您最好的选择可能是在字段上使用绝对位置，或者如果字段之间的所需空间是统一的，则可能只使用它们的容器。

标签： html css image textfield

【解决方案1】：

有几种方法可以做你想做的事。您可以使用绝对位置，您可以将标签和输入内容包装到一个 div、section 等中。

对于绝对位置，您可以例如使用下面的这种方法将输入和按钮居中放置在屏幕上；

.container {
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

为了在文本标签旁边有输入字段，您可以添加标签

<label for="enter-first-name">Enter Fist name</label>
<input id="enter-first-name" type="text" name="first_name" class="first-name-input" required>

为输入添加 id 和 for 属性很重要，以便标签知道它应该在哪个输入旁边呈现。

如果您希望标签和输入使用整行。您可以将 display: 块添加到您的输入和 float:left 以使标签转到输入的左侧。

input { 
    display: block; 
}

label {
    float: left;
}

作为最佳实践，您应该使用在输入和标签上使用的类名，而不仅仅是在 css 上输入。在您的 css 文件中使用“输入”和“标签”将使您的所有输入和标签的行为方式相同。而是使用类名。

编辑

在此链接中，您可以找到很多帮助将 div 在屏幕上居中。它超出了必要的范围，但绝对可以帮助您集中精力。 CSS-trick Centering CSS complete guide

【讨论】：