html - 自定义输入文本框

Question

我正在尝试使用多个背景图像来自定义输入框，但由于某些原因背景图像不起作用。

我想要实现的是:

多张背景图片是:

• >
• >

非常感谢任何帮助。

.login-block input#username {
  background: #2b2e30 url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat, url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') left 10px no-repeat;
  background-size: 100% 41px;
  background-position: left top;
}
.login-block input {
  border: medium none;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}

<div class="login-block">
  <input value="" placeholder="Username" id="username" type="text">
</div>

Answer 1

先显示图标，再显示背景，再显示十六进制背景

.login-block input#username {
  background:url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') 41px 41px no-repeat,url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat,#2b2e30;
  background-position:10px center, left center;
}

.login-block input {
  border: medium none;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}

<div class="login-block">
  <input value="" placeholder="Username" id="username" type="text">
</div>