CSS：透明图像覆盖输入字段

Question

我一直试图在输入字段上放置此透明徽标，但我无法将其放在左侧。谁能指导我如何实现这一目标？在此先感谢：）

<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/[email protected]")} 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;
}

How it should beHow it is

Answer 1

将position:absolute添加到图像类。它将在图像中将图像放置在所需的位置。