将输入字段放入图像中

Question

我有一张看起来像这样的图片：

(can't embed images yet)

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

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>

但这显示方式不正确，我该如何在图片中适当的文本旁边添加字段？

Answer 1

有多种方法可以做您想做的事。你可以使用绝对位置，你可以将你的标签和输入内容包装成一个div，部分等等。

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

.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 和属性以便标签知道应该在哪个输入旁边呈现。

如果你想让标签和输入使用整行。您可以添加 display: block 到您的输入和 float: left 以使标签位于输入的左侧。

input { 
    display: block; 
}

label {
    float: left;
}

作为最佳实践，您应该使用在输入和标签上使用的 class 名称，而不仅仅是在 css 上输入。在 css 文件中使用 "input" 和 "label" 将使所有输入和标签的行为相同。而是使用 class 名称。

编辑

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

将输入字段放入图像中

Putting input fields in an image

html

css

image

textfield