Background with Parallax does not appear

Question

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

In the code below (and also in the codepen above) I have 2 div’s where I’m doing an effect Parallax.

But I need to make the effect happen with background opaque. 30% opacity and I can’t get that directly into the div without also reaching the content.

So I’m doing in the ::before of div. But the background doesn’t appear at all.

Could you please help me understand?

$('.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.stack.imgur.com/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.stack.imgur.com/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>

Answer 1

From what I understand you want to leave the background "opaque" without affecting the opacity of the content, if that is it you can use to manipulate the background color in Coda rgba and use javascript logic to change the background color in a given example situation:

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

It seems that the background color is gray, plus it is black with 30% of the color "faded", you can manipulate to give the background color in the opacity you want

I left the tag color p white to show that it does not affect behavior :)

Edit: I found a not very old answer to exactly the same problem is the following:

There is nothing called background opacity. Opacity is applied to the element, its content and all its child elements. And this behavior cannot be changed just by replacing the opacity in the child elements. The opacity of children and parents has been an old problem and the most common correction is to use rgba(r,g,b,alpha)background colors. But in this case, because it is a background image, this solution will not work. A solution would be to generate the image as PNG with the required opacity in the image itself. Another solution would be to take the div son and make him absolutely positioned.

But of other answers ... found a css operator called background-blend-mode an example of this:

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

In the 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*/
}

It will merge the background color ( with 0.6 opacity) in the background image.

However, there are several operators to use background-blend-mode not only the lighten that was used in the example.