Html и CSS форма мне нужно уменьшить непрозрачность формы но не элементов в ней
html and CSS form I need to decrease opacity of the form but not the elements in it for example input, heading and button i am new to css ,also how to make the background full screen
//HTML-код
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="less-space.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-2 col-sm-2 col-1"></div>
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-8 col-10 xl-mt-200 lg-mt-200 md-mt-200 sm-mt-50 xs-mt-50">
<form align="align-items-center" id="form-signin" class="form-signin " method="post">
<div class="d-flex justify-content-center align-items-center" >
<h2 id="heading" class="form-signin-heading">Please Sign In</h2>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" required autofocus>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<div class="col-xl-3 col-lg-3 col-md-2 col-sm-2 col-1"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
//стиль CSS
body
{
background-image:url('background-image.jpg') !important;
background-repeat:no-repeat;
background-size: auto;
background-position:center;
}
.form-signin
{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color:#F5F5F5;
opacity: 0.8;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
//border: 1px solid rgba(0,0,0,0.1);
}
#heading
{
padding-bottom: 20px;
}
Что я уже пробовал:
...............................................................................................................................................................................