bbs-go-site

我是Web开发的初学者，并且为网页制作了Signup表单。我感觉表格中确实缺少一个圆形的头像图标，如下图所示：

我有html和CSS代码，并且已经加载了头像图标。但是，我不知道如何像图像一样将其放置在表单的顶部中间。感谢您在此任务上的帮助和指导。我的代码：

//the avatar appears inside the page not on top 
.avatar{


height:500px;
border-radius:50%;	
	
}	




.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
	
	
}





h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
		
}	

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
		
}	

.form-area input,select{

margin-bottom:20px;
width:100%;	
	
	
}	

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;	
outline:none;
height:40px;
color:#ffffff;
display:16px;
	
	
}	





.form-area select{
	
margin-top:20px;
padding:10px 0;
	
	
}	


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;	
border-radius:20px;	
	
	
}	


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;	
border-radius:20px;	
	
	
}	



button:hover{
	
opacity:0.7;	
	
	
}

 <div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 //the avatar I want to display on the form 
    <div class="imgcontainer">
      <img src="IMAGES/login.jpg" alt="Avatar" class="avatar">
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
	 
	 
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
	
	
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

 
    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
	
   </div>
   
 </form>

 </div>

先感谢您。如果您有任何疑问或需要有关我的页面的更多信息，请告诉我，我将更新帖子。

无法在登录表单上添加圈子用户头像