我试图让背景的.gif在8秒后淡出。再过7秒，文本和按钮应该出现。到目前为止，一切似乎都正常，但是文本和按钮似乎也随着背景一起淡出。看起来可能是我设置HTML的方式有问题，但如果只使用jQuery并且几乎不涉及HTML，是否有解决方法？欢迎提出建议，谢谢！
// Hide DISPIRIT text then fade in
$(".brand-heading").hide().delay(7000).fadeIn("slow");
$(".btn-circle").hide().delay(7000).fadeIn("slow");
// BG delay then fade out
$(".intro-body").delay(8000).fadeOut("slow");.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
background-color: black;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
background: url(../img/static.gif) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.brand-heading {
font-size: 40px;
}
@media (min-width: 768px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 100px;
}
/*.intro .intro-body .intro-text {
font-size: 26px;
}*/
}
.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid white;
border-radius: 100% !important;
font-size: 40px;
color: white;
background: transparent;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading"><i>Dispirit</i></h1>
<p class="intro-text"></p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
.fadeIn()和.fadeOut()方法来操作 jQuery 对象，而不是在 CSS 中设置的background-image。据我所知，无法设置 CSS 中设置的background-image的opacity。但你可以设置 DOM 元素的opacity。 - guest271314.intro-body，这将隐藏整个元素及其中包含的所有内容 - 几乎是您的所有内容。您需要稍微修改HTML。 - Jon Uleis<canvas>、CanvasRenderingContext2D.globalAlpha [ = value ]、HTMLCanvasElement.toDataURL()方法以及requestAnimationFrame()和setTimeout()函数实现。 - guest271314