0

https://codepen.io/carcleo/pen/JjbYQWa

No código abaixo (e também no codepen acima) eu tenho 2 div's onde estou fazendo um efeito parallax.

Mas eu preciso fazer o efeito acontecer com fundo opaco. uns 30% de opacidade e isso não consigo diretamente na div sem atingir também o conteúdo.

Logo, estou fazendo no ::before da div. Mas o background não aparece de jeito nenhum.

Poderiam me ajudar por favor a entender?

$('.prlx::before').each(function() {
    
    var obj = $(this);
    
    obj.css('background-position', '50% 0');
    obj.css('background-attachment', 'fixed');
    
    $(window).scroll(function() {
        
        var offset = obj.offset();
        var yPos = -($(window).scrollTop() - offset.top) / 10;
        var bgpos = obj.css('background-position-x') + ' ' + yPos + 'px';
        obj.css('background-position', bgpos);
        
    });
    
});
#detalhes {
    position: relative;
    width: 100vw;
    height: 600px;
}
#contato {
    position: relative;
    width: 100vw;
    height: 800px;
}
#detalhes::before {
    content:'';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .2;
    background-image: url("https://i.sstatic.net/vxxg4.jpg") ;
    background-size: cover;
}
#contato::before {
    content:'';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .2;
    background-image: url("https://i.sstatic.net/D0Mls.jpg") ;
    background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="detalhes" class="prlx"></div>

<div id="contato" class="prlx"></div>

2

1 Resposta 1

1

Pelo que entendi você quer deixar o fundo "opaco" sem afetar a opacidade do conteúdo, se for isso você pode usar manipular a cor do fundo em códico rgba e usar a lógica em javascript para mudar a cor de fundo em determinada situação exemplo:

<div style="background-color:rgba(0, 0, 0, 0.3);"> 
 <p style="color:white"> Text added. </p> 
 </div>

Parece que a cor de fundo é cinza, mais é preto com 30% da cor "desbotado", você pode manipular para dar a cor de fundo na opacidade que você quer

Deixei a cor da tag p branco pra mostrar que não afeta o comportamento :)

Edit: Encontrei uma resposta não muito antiga para exatamente o mesmo problema está é a seguinte:

Não há nada chamado opacidade de fundo. A opacidade é aplicada ao elemento, seu conteúdo e todos os seus elementos filho. E esse comportamento não pode ser alterado apenas substituindo a opacidade nos elementos filhos. A opacidade dos filhos e dos pais tem sido um problema antigo e a correção mais comum é usar rgba(r,g,b,alpha)cores de fundo. Mas neste caso, por se tratar de uma imagem de fundo, essa solução não funcionará. Uma solução seria gerar a imagem como PNG com a opacidade necessária na própria imagem. Outra solução seria tirar o div filho e torná-lo absolutamente posicionado.

Porém de outras respostas ... encontrei um operador do css chamado background-blend-mode um exemplo deste:

<div id="content">Only one div needed</div>

No CSS:

div#content {
 background-image: url(my_image.png);
 background-color: rgba(255,255,255,0.6);
 background-blend-mode: lighten;
 /* Você pode adicionar largura de fundo etc*/
}

Ele irá mesclar a cor de fundo ( com a opacidade 0,6) na imagem de fundo.

Porem tem vários operadores para se usar o background-blend-mode não é só o lighten que foi usado no exemplo.

8
  • Não -e cor de fundo, se fosse, usaria rgba() mas é imagem de fundo. Essa está sendo a minha dificuldade. Commented 4/02/2021 às 19:27
  • Editado :) esqueci de avisar kkk
    – Dakota
    Commented 4/02/2021 às 20:56
  • Não entendi muito bem. Você está usando a imagem e uma cor de fundo juntas . O background-blend-mode: lighten; vai afetar a imagem de fundo ou a cor de fundo? Precisa necessariamente ser a imagem e não tem necessidade de uma cor de fundo. Salvo se o objetivo seja aguardar o carregamento da imagem, Commented 5/02/2021 às 0:28
  • Sim, usei a cor de fundo, porque o background-blend-mode não funciona sem o background-color mas é no background-color que você ajusta o quanto você quer de opacidade, nesse caso a opacidade é de 0,6 se quiser uma menor pode trocar o 6 pelo 3 aí vai ficar com 0,3 de opacidade.
    – Dakota
    Commented 5/02/2021 às 1:43
  • Desculpe, não deu certo. Veja: codepen.io/carcleo/pen/BaQjYyV Commented 5/02/2021 às 8:55

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 .