将输入字段放入图像中

Question

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

(尚无法嵌入图像(

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

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 和 for 属性非常重要，以便标签知道它应该在哪个输入旁边呈现。

如果您希望标签和输入使用整行。 您可以将显示：块添加到您的输入和浮动：左，以使标签转到输入的左侧。

input { 
display: block; 
}
label {
float: left;
}

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

编辑

在此链接中，您可以找到很多帮助，以在屏幕上居中div。 它超出了必要的范围，但绝对可以帮助您集中内容。 CSS技巧居中CSS完整指南