同一问题的所有答案都不适合我，因为用jQuery制成的动画中的淡出。如果我放置{位置：固定；左：0;右：0;}对于背景类和内容类别，那么动画中的淡出不起作用。我还尝试在背景类以外的所有内容中添加{过滤器：无;}。
$(function(){
$('.intro').fadeIn('slow');
});
$(document).ready(function() {
$(window).scroll( function(){
$('.article').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},1500);
}
});
});
});#main-container{
height: 2000px;
background-image: url('https://i.postimg.cc/43V74cv9/Screenshot-2019-03-19-at-6-29-57-PM.jpg');
filter: blur(5px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.article{
background-color: blue;
margin: 50px;
padding: 50px;
z-index: 0;
opacity: 0;
}
h1{
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="bg">
<div id="main-container">
<h1>TITLE PLACEHOLDER</h1>
<div id="intro">intro stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
</div>
</div>主容量包装的其余代码。自然，当您对其应用模糊过滤器时，它会模糊包装纸中存在的其他项目。尝试添加另一个DIV，如编辑的代码中所示的绝对定位。这将解决您的问题。
$(function(){
$('.intro').fadeIn('slow');
});
$(document).ready(function() {
$(window).scroll( function(){
$('.article').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},1500);
}
});
});
});#main-container{
height: 2000px;
position: relative;
}
.main-image {
position: absolute;
width: 100%;
height: 100%;
background-image: url('https://i.postimg.cc/43V74cv9/Screenshot-2019-03-19-at-6-29-57-PM.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
filter: blur(5px);
}
.article{
background-color: blue;
margin: 50px;
padding: 50px;
z-index: 0;
opacity: 0;
}
h1{
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="bg">
<div id="main-container">
<div class="main-image"></div>
<h1>TITLE PLACEHOLDER</h1>
<div id="intro">intro stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
</div>
</div>模糊过滤器适用于main-container的所有子元素。创建具有绝对位置的其他容器，在#main-container之后将分配给背景：
$(function(){
$('.intro').fadeIn('slow');
});
$(document).ready(function() {
$(window).scroll( function(){
$('.article').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
if($(this).hasClass('animated') == false){ //if class .animated exists, skip animating
$(this).animate({'opacity':'1'},1500); //animate
$(this).addClass('animated'); //add css class to avoid animating repeatedly
}
}
});
});
});#background-container{
height: 2000px;
background-image: url('https://i.postimg.cc/43V74cv9/Screenshot-2019-03-19-at-6-29-57-PM.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
filter: blur(5px);
z-index: 0;
}
#main-container{
height: 2000px;
position:relative; /* set position other than static, so we can avoid overlapping of elements by z-index */
z-index: 1;
}
.article{
background-color: blue;
margin: 50px;
padding: 50px;
z-index: 0;
opacity: 0;
}
h1{
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="bg">
<div id="background-container"></div>
<div id="main-container">
<h1>TITLE PLACEHOLDER</h1>
<div id="intro">intro stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
<div class="article">other stuff</div>
</div>
</div>
注意：我已将position:relative添加到main-container中，因此z-index有效，并避免重叠main-container和background-container。另外，一旦出现.article，我就添加了animated类，以避免每次滚动页面时重复动画。