我有一个带有导航
栏的简单网页。当切换我的导航栏时,我希望页面中的其余区域覆盖实时 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;
}
最佳答案
您需要添加更高的 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>
关于html - 如何制作像 youtube 一样的叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48750861/