Transparent Login Form in HTML , CSS

<html>
<head>
<title>Login page</title>
<style>
#i1{
position:absolute;}
#d1{
position:absolute;
top:25%;
right:25%;
text-align:center;
box-shadow:0px 0px 10px #000000;}
#t1{
margin:20px 10px 20px 10px;
background-color:#FFFFAA;
padding:5px;
padding-left:10;
border-radius:50px;
transition-duration: 0.5s;}
#t1:focus{
background-color:#4CDF50;
border: 2px solid #000000;}
#t2{
margin:20px 10px 20px 10px;
background-color:#FFFFAA;
padding:5px;
padding-left:10;
border-radius:50px;
transition-duration: 0.5s;}
#t2:focus{
background-color:#4CDF50;
border: 2px solid #000000;}
#b1{
height:35px;
width:75%;
margin:20px 10px 20px 10px;
background-color:#FFFFAA;
color: black;
border: 2px solid #4CAF50;
transition-duration: 0.5s;
cursor: pointer;
border-radius:50px;}
#b1:hover {background-color: #4CAF50;
color: white;
border: 2px solid #000000;}
#p1{
text-shadow:1px 1px #000000;
color:#ffffff;
font-size:20px;}
</style>
</head>
<body>
<img src="https://i.ibb.co/LJRkQDk/leaves-yellow-orange-dry-branch-autumn-blur-wallpaper-4k-ult.jpg" id="i1" alt="background image" width="1332px" height="850px">
<div id="d1">
<form>
<br/><i><span id="p1">Login Form</span></i><br />
<input type="text" placeholder="Email" id="t1" required/><br />
<input type="password" placeholder="Password" id="t2" required/><br />
<input type="submit" value="Log in" id="b1" /><br />
</form>
</div>
</body>
</html>