0

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?

3 Respostas 3

4

Isso está ocorrendo porque se você informar diretamente ao elemento que ele deve possuir um opacidade, todos os seus herdeiros receberão esse mesmo estilo opaco, exemplo:

.pai-opaco {
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);

  width:200px;
  height:200px;
  opacity: 0.5;
}

.filho-opaco {
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
}
<div class='pai-opaco'>
  <div class='filho-opaco'>
      

  </div>
</div>

Para que isso não ocorra, há mais de uma solução, acredito que o padrão seja utilizar o pseudo seletor after, para indicar que esse estilo deve ser adicionado 'após', elemento assim não herdando em seus filhos, em outras palavras, o filho recebe a herança do pai mas depois o pai recebe mais uma propriedade que não é passada aos filhos, e também adicionar as suas respectivas instruções de opacidade, como demonstrado no exemplo a seguir:

body::after {
content: "";
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
background-repeat: no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.container {
  width:200px;
  height:200px;
  top:0px;
  left:0px;
  position: absolute;
  background-color:#000;
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
}
<div class="container">
    
</div>

Repare que o background de body está opaco, enquanto o elemento .container, mesmo sendo herdeiro, não está opaco.

Observações:

Versões do IE inferiores a versão 6 não oferecem suporte a esse seletor.

Fontes:

http://maujor.com/tutorial/seletores_css21_parte3.php

https://www.w3schools.com/css/css_image_transparency.asp

https://www.w3schools.com/cssref/sel_after.asp

0
2

Pode obter esse efeito usando after, exemplo...

div {
  width: 100%;
  height: 100vh;
  position: relative;
}
span{
color: red;
}
div::after {
  content: "";
  background: url(https://fakeimg.pl/300/);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
<div>
  <label>Nome: </label>
  <input type="text">
  <span>teste exemplo</span>
</div>

Referência: CSS-tricks

1

Da uma olhada no codepen que realizei para esse teu caso com a propriedade opacity em background-images.

Pode ver que a propriedade opacity ela esta aplicada só a imagem de fundo, em quanto os elementos que ficão por cima não tem opacity.

@import "compass/css3";
@import url('https://fonts.googleapis.com/css?family=Anton');

* { box-sizing: border-box; margin: 0; padding:0; }

html {
  background: #12292b;
  font-family: 'Helvetica Neue', Arial, Sans-Serif;  
}
.background {
    background: #060a11;
    overflow: hidden;
    width: 50%;
    z-index: -1;
}
.background:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    opacity: 0.2;
    background-image: url('http://s3.thingpic.com/images/QS/AMR4zB4KLosYFsFd6U7TVnGr.jpeg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
.background2 {
    background: #060a11;
    overflow: hidden;
    width: 50%;
    z-index: -1;
}
.background2:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    background-image: url('http://s3.thingpic.com/images/QS/AMR4zB4KLosYFsFd6U7TVnGr.jpeg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
.opacity {
 background-color: #fff;
 font-family: 'Anton', sans-serif;
 text-align: center;
 color: #004d4d;
 width: 50%;
 margin-top: 3%;
 border-right: 1px solid #004d4d;
}
.opacity2 {
 background-color: #fff;
 font-family: 'Anton', sans-serif;
 text-align: center;
 color: #004d4d;
 margin-left: 50%; 
 margin-top: -3.8%;
 border-left: 1px solid #004d4d;
}
<div class="background"></div>
<div class="opacity">Background con opacity</div>
<div class="background2"></div>
<div class="opacity2">Background sin opacity</div>

Para visualizar o código fonte ingresse no link > CodePen - Background Opacity CSS only

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .