输入类型文本和背景图像

Question

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

所以，我会在单独的css文件中使用这张图片作为背景图片（自然没有两个“输入文本”），到现在为止没问题。我的问题是，从这张图片开始，如何插入两个输入文本“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%);
}

Answer 2

你可以使用背景图像和不透明度以多种方式做这些事情。无论如何你参考我正在分享快速实施here