CSS：透明图像叠加输入字段

Question

我一直在尝试在输入字段上 position 这个透明徽标，但我无法将它放在左侧。 谁能指导我如何实现这一目标？ 提前致谢：）

<div className={classes.formClass}>
        <h3 className={classes.active}>Sign Up</h3>
        <h3 className={classes.notActive} onClick={this.switchAuthModeHandler}>
          Log In
        </h3>
        <div>
          {/* <img src={require("../../assests/ic_username@2x.png")} alt="" /> */} [the image logo]
          <input
            type="text"
            placeholder="Username"
            name="username"
            onChange={(event) => this.inputChangedHandler(event, "username")}
          />
        </div>
</div>

CSS: 
.formClass {
  display: block;
  position: relative !important;
  margin-left: auto;
  margin-right: auto;
}

.formClass img {
  position: absolute;
  margin-left: 50%;
  margin-right: 30%;
  top: 12px;
  height: 24px;
  width: 24px;
  left: 20px;
  right: 10px;
}

.formClass div input {
  height: 52px;
  width: 360px;
  border-radius: 0px;
  opacity: 30%;

  margin-bottom: 12px;
}

它应该如何 它是如何

Answer 1

将position:absolute添加到您的图像 class。它将 position 图像在您的输入中与您的要求相同。