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>
:before
,:after
seu selector =>'.prlx::before'
, você vai ter que manipular de outra forma