[分享]css再一个图片上添加表单

在网页设计中，我们经常需要在图片上添加表单。为此，我们可以利用CSS技术轻松实现这一功能。下面我们将为大家演示如何在图片上添加表单。 用户名 密码 imgform { : relativ...

在网页设计中，我们经常需要在图片上添加表单。为此，我们可以利用CSS技术轻松实现这一功能。下面我们将为大家演示如何在图片上添加表单。

<div id="img-form">
  <img src="picture.png" alt="图片">
  <form>
    <label>用户名</label>
    <input type="text">
    <br>
    <label>密码</label>
    <input type="password">
    <br>
    <input type="submit" value="登录">
  </form>
</div>

#img-form {
  position: relative;
}

#img-form form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#img-form img {
  display: block;
  width: 100%;
  height: auto;
} 

首先，我们需要将图片和表单放在一个div容器内，并设置该容器为相对定位。接下来，我们为表单设置绝对定位，并利用transform属性将表单居中。最后，我们需要为图片设置宽度100%，以便使其与容器尺寸相适应。以上就是在图片上添加表单的简单方法，大家可以根据需要进行相应的调整。