Question

我是HTML，CSS的新手。任何人都可以帮我设置图像上的输入框吗？

这是我的代码：

<html>
<head
<title></title>
</head>
<body>
    <div id="img" style="position:relative;" >
    <img src="C:\Users\Admin\Downloads\n3.jpg" max-width:100% height:auto>
        <div style="position:absolute;">
    <pre>

    Login:<input name="login" placeholder="enter your mail id here" type="email">       Password:<input name="password" placeholder="password"  type="password">
    </pre>
    </div>
</div>   
</body>
</html>

此代码首先显示图像，然后在其下方输入框。非常感谢您的帮助。

Answer 1

不完全清楚这应该是什么样的，但是像这样的

＆＃13;

#img {
  position: relative;
  display: inline-block;
}
#img img {
  max-width: 100%;
  height: auto;
  display: block;
}
#img div {
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  text-align: center;
}
#img div label {
  display: block;
}

＆＃13;

<div id="img" style="position:relative;">
  <img src="http://lorempixel.com/g/400/200/">
  <div>
    <form>
      <label for="login">Email</label>
      <input name="login" placeholder="enter your mail id here" type="email" />
      <label for="password">Password:</label>
      <input name="password" placeholder="password" type="password" />
    </form>
  </div>

＆＃13;

Answer 2

只需将css'top：0px'添加到第二个div。

新代码：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="img" style="position:relative;" >
        <img src="C:\Users\Admin\Downloads\n3.jpg" style="max-width:100% height:auto">
        <div style="position:absolute; top: 0px;">
            <pre>

                Login:<input name="login" placeholder="enter your mail id here" type="email">       Password:<input name="password" placeholder="password"  type="password">
            </pre>
        </div>
    </div>
    </body>
</html>

Answer 3

尽量避免使用内联样式并创建更好的结构。根据您的要求调整top值。

.content {
  position: absolute;
  top: 45%;
}

#img {
  position: relative;
}

<div id="img">
  <img src="http://placehold.it/600x400" />
  <div class="content">
    <pre>
    Login:<input name="login" placeholder="enter your mail id here" type="email">       Password:<input name="password" placeholder="password"  type="password">
    </pre>
  </div>
</div>

Answer 4

一种方法是在输入的父div的背景中使用图像。



Login:<input name="login" placeholder="enter your mail id here" type="email">       Password:<input name="password" placeholder="password"  type="password">
</pre>
</div>

在图像上输入框

4 个答案: