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>