html - 如何制作像 youtube 一样的叠加层

Question

我有一个带有导航 栏的简单网页。当切换我的导航栏时，我希望页面中的其余区域覆盖实时 Youtube(下面附有示例图像)。但是在尝试 100 次之后，结果附在下面(下面附有示例图像)。问题是它不是 overlay 定义了 color 属性的元素。

我实现overlay的css代码:

.overlay{
        width: 100%;
        position: fixed !fixed;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5) !important;
        z-index:0;
        cursor: pointer;
   }

Answer 1

您需要添加更高的 z-index 和灰色背景叠加层。

$(".btn").click(function () {
    $(".overlay").show();
});

    .overlay {
     background-color: rgba(128, 128, 128, 0.40);
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 99999;
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="overlay">
</div>

<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
    <input type="text">
    <button class="btn btn-success">Submit</button>
</div>