javascript - 淡出 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>