html - 输入类型文本和背景图像

Question

我上周开始使用 php/html/css 编写代码，因此我不是网络编程方面的专家。我的目标是这张图片:

所以，我将这张图片作为background-image放在一个单独的css文件中(自然没有两个“input text”)，到现在没问题。我的问题是，从这张图片开始，如何在这张图片中插入两个输入文本“Inside”(我知道这不是正确的世界，但我不知道到底是哪个，抱歉)？我应该走哪条路？

如果问题格式不正确，再次抱歉，但我是网络编程的新手。

Answer 1

我给你做了一个例子，看看这个Codepen 祝你好运!

<div class="container">
  <div class="inputs">
    <input type="text" /><br />
    <input type="password" />
    <input type="submit" value="Login" />
  </div>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-image: url(http://wallpapersrang.com/wp-content/uploads/2015/12/black-jumpman-logo-jordan-wallpaper-tumblr-backgrounds-cool.png);
  background-size: cover;
}

.container {
  width: 100%;
  height: 300px;
  background-color: rgba(255, 255, 255, .5);
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.inputs {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}