Um snippet fala mais que mil palavras:
body {
padding-top: 11%;
background: url(https://fakeimg.pl/1920x1920/);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" method="post" action="login.php">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h2>Entrar</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="form-group has-danger">
<label>Digite seu e-mail</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" name="email" class="form-control" id="email"
placeholder="[email protected]" required autofocus>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="form-group">
<label>Digite sua senha</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="password" name="password" class="form-control" id="password"
placeholder="********" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="padding-top: .35rem">
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" name="remember" type="checkbox" checked="checked">
<span style="padding-bottom: .15rem">Lembrar-me</span>
</label>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem">
<div class="col-md-3"></div>
<div class="col-md-6">
<button type="submit" class="btn btn-info"><i class="fa fa-sign-in"></i> Login</button>
</div>
</div>
</form>
</div>
</body>
Veja que nessa página de login possuo um formulário simples, com uma imagem de fundo, inserida através de CSS pelo background url.
Entretanto ao tentar adicionar opacidade somente na imagem , com o código abaixo, todo o formulário perde a opacidade, e a imagem em si não perde:
body {
padding-top: 11%;
background: url(https://fakeimg.pl/1920x1920/);
opacity: 0.5;
}
body {
padding-top: 11%;
background: url(https://fakeimg.pl/1920x1920/);
opacity: 0.5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" method="post" action="login.php">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h2>Entrar</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="form-group has-danger">
<label>Digite seu e-mail</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" name="email" class="form-control" id="email"
placeholder="[email protected]" required autofocus>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="form-group">
<label>Digite sua senha</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="password" name="password" class="form-control" id="password"
placeholder="********" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="padding-top: .35rem">
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" name="remember" type="checkbox" checked="checked">
<span style="padding-bottom: .15rem">Lembrar-me</span>
</label>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem">
<div class="col-md-3"></div>
<div class="col-md-6">
<button type="submit" class="btn btn-info"><i class="fa fa-sign-in"></i> Login</button>
</div>
</div>
</form>
</div>
</body>
Tentei também adicionar a opacidade junto ao background url, entretanto não foi reconhecido e apagou a imagem:
background: url(https://fakeimg.pl/1920x1920/) opacity: 0.5;
Então, como posso obter a imagem de fundo do corpo com pouca opacidade e manter o texto com opacidade total?