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