2

Quero deixar a imagem de de fundo transparente sem afetar os outros itens do body, só a imagem, mas quando coloco o opacity o site inteiro fica transparente, se caso não tiver como é boa pratica eu usar a tag img como imagem de fundo?

Esse é o html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Formularios</title>
    <link rel="stylesheet" href="formularioscss/formularios.css" type="text/css"/>
</head>

<body>


  <header class="cabecalho">

      <!-- <img src="imagens/faculdade_impacta_azul.jpg" alt=""> -->

        <ul>
            <li><a href=""> Home</a></li>
            <li>Lista de Cursos</li>
            <li>Noticias</li>
        </ul>
    </header>

    <div class="tran">
      <!--<img src="D:/Apache24/htdocs/TecWeb/EP_TecWeb/Formularios/Imagens/Fundo_Login.png" alt="">-->
    </div>
    <form method="GET" action="" class="formLogin">
        <label for="Login">Login</label>
        <p><input type="login" name="login" id="login"></p>

        <label for="senha">senha</label>
         <p><input type="password" name="senha" id="senha"></p>
    </form>
</body>

Esse é o trecho do css que quero deixa a imagem de fundo transparente:

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
   url("D:/Apache24/htdocs/TecWeb/EP_TecWeb/Formularios/Imagens/Fundo_Login.png");
    background-attachment: fixed;
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: 'PT Sans', sans-serif;
}

2 Respostas 2

2

O truque aqui é criar um novo elemento apenas para lidar com a imagem de fundo da seguinte forma:

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));
    font-family: 'PT Sans', sans-serif;
}
.bg-fundo {
    background-image: url("http://lorempixel.com/1280/720/city/5/");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
}
<body>
    <header class="cabecalho"></header>
    <div class="tran"></div>
    <form method="GET" action="" class="formLogin"></form>
    <div class="bg-fundo"></div> <!-- bg de fundo -->
</body>

E se for necessário reforçar mais ainda para fazer o conteúdo do site ficar por cima de tudo por causa de algum problema de overlapping podes sempre envolver todo o conteúdo menos o bg-fundo num wrapper, e adicionar-lhe um z-index superior ao bg-fundo. Por outras palavras:

<body>
    <div class="content-wrapper">
        <header class="cabecalho"></header>
        <div class="tran"></div>
        <form method="GET" action="" class="formLogin"></form>
    </div>
    <div class="bg-fundo"></div>
</body>
.content-wrapper{
    z-index: 1; /* ou mais */
}
.bg-fundo {
    z-index: 0;
}
3
  • Obrigado deu certo aqui, mas agora surgiu um outro problema, eu estou usando uma menu horizontal na parta superior, e com a opacidade a imagem de fundo está sobrepondo o menu, como arrumo isso?
    – zaque
    21/09/2017 às 17:51
  • @zaque Isso é por causa do nível de empilhamento. Por isso que adicionei aquela segunda opção de criar um wrapper e atribuir um z-index daquela maneira. Adiciona um z-index de 0 ou negativo ao elemento .bg-fundo. Por exemplo: .bg-fundo{z-index:-1;}. Se não resultar, siga as instruções do segundo método que indiquei na minha resposta. Para aprender mais sobre o z-index visita este link ou esta resposta em que detalhei um pouco sobre o que é o z-index em Português.
    – Chun
    21/09/2017 às 18:10
  • Opa, agora que eu coloquei -1 deu certo, mas uma vez obrigado
    – zaque
    21/09/2017 às 22:38
1

Implemente um pseudo-elemento onde seu background sera aplicado. No exemplo abaixo:

body > :first-child:before

Significa:

Aplique as seguintes regras imediatamente antes do primeiro elemento dentro do elemento body:

Isso força a criação de um pseudo-elemento que você pode caracterizar da maneira que quiser, sem a necessidade de criar wrappers.

body > :first-child:before {
    background-image: url("http://wallpapers-library.com/images/free-wallpaper-for-website-backgrounds/free-wallpaper-for-website-backgrounds-27.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content:'';
    opacity:.5;
    }
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

1
  • Ou mesmo no body que na minha opinião será uma melhor atribuição body:before com um z-index de -1 visto que o primeiro elemento filho poderá ou não ter o seu próprio pseudo elemento. Por acaso não pensei nisso, +1 ;) . Não seria necessariamente necessário criar um wrapper, na minha resposta da maneira como eu coloquei o novo elemento bg-fundo no final do documento ele automaticamente fica numa posição inferior relativamente aos outros elementos anteriores no eixo Z. Criar um wrapper é apenas um reforço.
    – Chun
    20/09/2017 às 18:09

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 .