Question

我不想知道如何使用图像作为输入文本。我想知道如何将文本输入放在图像上

的login.html

<div id = "background">
   <img class="stretch" alt="" src="C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png">
      <div class = "text">
          <input type="text" >
          <input type="text" >
      </div>
</div>

login.css

#background{
  margin-left:30%;
  width:400px;
  height:400px;
}
.stretch{
  width:100%;
  height:100%;
}

.text{

}

我现在要做的是模仿Google“登录”页面

Answer 1

您有2个选项

设置#backkground的背景图片。使用边距，填充或其他背景css进行定位。此选项不需要任何img标记。
在#background上使用position：relative，在.text上使用position：absolute。在#text上使用left，top，right，bottom css进行任何类型的定位。

我建议选择第一个选项。但是如果你因为某些原因觉得需要保留img标签，那么第二个选项就足够了。

Answer 2

请务必关闭文字输入标签。也试试这个。

CSS：

#background {
    margin-left: 30%;
    width: 400px;
    height: 400px;
    background-image: url(C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png);
    background-size: contain;
}

HTML：

<div id = "background">
 <div class = "text">
    <input type="text" />
    <input type="text" />
 </div>
</div>

使用CSS将文本输入定位在div内的位置。

如何使用css和html将输入类型=“文本”放在图像上

2 个答案: