淡出 div 时维护文本

Question

我正在使用youtube iframe api作为视频背景，我想做的是，我想在视频开始时有一个背景颜色，并且该背景颜色应该覆盖整个div，另外还应该有一个文本在中心，我的问题与该文本有关，因为当我在视频开始时淡出带有背景颜色的div时， 我想维护文本，文本应该始终存在，我该怎么做这样的事情？，我已经有了背景颜色div和视频，但我无法维护div上的文本。

.html

<section class="content_section bg_fixed white_section bg2">
<div class="embed-responsive embed-responsive-16by9">
<div id="over">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="title-wrapper main_title text-center centered upper">
<h2><span class="line"></span>Simple solutions for complex problems</h2>
</div>
<div class="description4 centered">
<p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br>
Usability and simple deployment are the key words.</b></p>
<p dir="ltr">&nbsp;</p>
<p dir="ltr">&nbsp;</p>
<p dir="ltr">&nbsp;</p>
</div>
</div>
<div id="video_overlays"></div>
<div class="container" style="position: relative;">

</div>
<div id="player" width="100%" height="100%" style="z-index:-1">
</div>
</div>
</section>

Answer 1

div 的透明度会影响其所有子项的透明度，因此当您淡化它时，里面的任何内容也会淡出。尝试创建一个单独的div 来包含文本，并将其放在带有背景色的div 下方的代码中。然后，使用相对定位将其放在背景上。

$('.bg').animate({'opacity': 0}, 2000);

.bg {
width: 200px;
height: 200px;
background-color: red;
}
.text {
position: relative;
width: 200px;
height: 200px;
top: -200px;
color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
</div>
<div class="text">
Your text here.
</div>