1

Eu tentei colocar o gradiente no cabeçalho que está sendo o "container" das imagens, mas ele só fica por trás das imagens.

Já tentei usar o z-index mas sem sucesso.

<body>        
    <div class="container">
        <section class="cabecalho">
            <header>
                IMAGEM DE CIMA TA AQUI
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    IMAGEM DE BAIXO 
                </div>
        </section>
    </div>       

</body>

Bom dia obrigado pela ajuda, mas e justamente isso que eu quero encobrir as duas imagens que estão como background, porém em vou controlar o gradiente de forma que fica possível visualizar a imagem. anexo 2 imagens com o exemplo que quero seguir, e o que estou fazendo.

essa e imagem que estou seguindo quero usar esse efeito. esse e o cabeçalho que eu fiz não to conseguindo colocar o gradiente pra ficar por cima dessas duas imagens, parece ser apenas uma mas e duas imagens.

4
  • Seria bom vc incluir o que vc tiver de css na pergunta também. Ficou um pouco confuso, vc quer que a imagem fique por traz do gradiente da section tipo com um transparência para a imagem ficar aparecendo por baixo eh isso?
    – hugocsl
    16/07/2018 às 9:57
  • poderia adicionar o css ? ou criar um jsfiddle.net e postar lá seu codigo para que vejamos 16/07/2018 às 11:51
  • Cara fiz uma edição na minha resposta. Acredito que agora está mais de acordo com o que vc pretendia. Se possível coloque as informações que vc postou no campo de Resposta aqui na sua pergunta, utilizando o link "editar" logo ai embaixo da sua pergunta original. Se tiver alguma dúvida com a minha resposta é só comentar lá blz
    – hugocsl
    16/07/2018 às 15:57
  • Muito top eu consegue graças a essa sua mega ajuda, coloque as imagens como background e funfou direitinho. Muito Obrigado Sucesso. agora como faço pra informar que essa resposta foi útil e fechar essa discussão ? 16/07/2018 às 21:24

1 Resposta 1

2

EDIT

De acordo com as informações que o autor da pergunta acrescentou segue uma nova resposta, mais coerente com a dúvida.

Vc preica criar um pseudo-elemento no .container e colocar ele com position:absolute e o z-index maior que o dos outros elementos. Assim vc consegue botar esse elemento por cima dos outros, e não o background do .container pai por cima dos elementos filho que estão dentro.

  .container {
    position: relative;
  }
  .container::after {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, #fff 100%);
  }
    <div class="container">
        <section class="cabecalho">
            <header>
                    <img class="mix" src="http://unsplash.it/110/100" alt="">
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    <img class="opa" src="http://unsplash.it/102/102" alt="">
                </div>
        </section>
    </div>  


Sua pergunta ficou um pouco confusa. Pois se vc colocar o gradiente por cima da imagem vc não vai conseguir ver a imagem, pois o gradiente vai ficar encobrindo tudo que está por traz.

Outra coisa, não é possível vc colocar o background do elemento "pai" que no caso é o seu .container na frente dos elementos "filhos" que estão dentro do desse elemento .container

Tem duas formas para vc tentar simular esse efeito caso queira "misturar" a imagem que está dentro do .container como o fundo gradiente que é o background dele.

Uma forma de simular isso é usando mix-blend-mode na imagem outra forma é com opacity. Nesse exemplo a seguir a imagem de cima esta com o blend-mode e a de baixo com opacity para vc ver o comportamento de cada opção.

OBS: Diferente do opacity que é possível apenas controlar a intensidade da opacidade variando de 0.1 até 1, o mix-blend-mode não tem o suporte tão bom dos browsers ainda, porém tem várias opções de mesclagem como vc pode consultar aqui https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all

.container {
    background-image: linear-gradient(red, blue);
}
.container .mix  {
    mix-blend-mode: screen;
}
.container .opa {
    opacity: 0.5;
}
    <div class="container">
        <section class="cabecalho">
            <header>
                    <img class="mix" src="http://unsplash.it/110/100" alt="">
                <h1>
                    LOgo
                </h1>
                <nav title="Menu de Navegação">
                    <ul>
                        <li><a href="#">Trips</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#"><span></span>Sua Conta</a></li>
                    </ul>
                </nav>

            </header>
                <div>
                    <img class="opa" src="http://unsplash.it/102/102" alt="">
                </div>
        </section>
    </div>  

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 .