Вот состряпал код на скорую руку
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
body, html {height: 100%;margin: 0;}
.container {height: 100%;}
.bg{height:600px;}
.image1{background:#F0E68C;}
.image2{background:url("https://s3.studytonight.com/tutorials/uploads/pictures/1629719495-.jpeg"), url("https://s3.studytonight.com/tutorials/uploads/pictures/1629719426-.jpeg");}
.image3{background:#87CEFA;}
</style>
</head>
<body>
<div class="container">
<div class="bg image1"></div>
<div class="bg image2"></div>
<div class="bg image3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('.bg').css("opacity", 1- $(window).scrollTop() / 700)
})
})
</script>
</body>
</html>
здесь jquery обращается к классу
.bg
а как обратиться к верхней картинке бакграунда класса
.image2 ?
И причем, верхняя картинка класса
.image2 постепенно увеличивает прозрачность, но нижняя картинка не показывается...