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/[e-mail]")} 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添加到图像类中。它将根据您的要求将图像放置在您的输入中。