Question

我正在尝试创建一个简单的overlay，

.overlay{
background-color:black;
opacity:0.5;
position:fixed;
width:100%;
height:100%;
display:none;
}

已经存在的网站。它的工作和覆盖整个屏幕，但只隐藏一些div，如隐藏按钮，但不是搜索栏，或一些标签，

所以实际上很少有事情透过覆盖层偷窥并且没有落后于它。我搜索了很多解决方案但找不到解决方案。

我尝试F12并查看这些偷窥元素的CSS，但找不到任何值得打扰的东西，没有position，没有overflow，我能找到。< / p>

Html代码是一个简单的div标签，覆盖为类

请帮忙。感谢名单!!

Answer 1

如果我理解正确，有些元素会覆盖你的。

我建议尝试更高的z-index。

尝试：

.overlay {
  background-color: black;
  opacity: 0.5;
  position: absolut;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
}

Answer 2

工作得很好。试试这个

＆＃13;

.overlay{
background-color:black;
opacity:0.5;
position:fixed;
width:100%;
height:100%;
display:none;
}

＆＃13;

<div class="overlay">
Overlay Div
  <div class="class-1">
  Test-1
  </div>
   <div class="class-2">
  Test-2
  </div>
</div>

＆＃13;

Answer 3

.trPic{ width:320px; height:240px; background: url(img/flower.png) no-repeat; border:5px solid #000000; } 
.trPic .redO{ position:relative; top:0px; width:320px; height:240px; background:#FF2400; opacity:0; }
.trPic:hover .redO { opacity:0.7; }

<!DOCTYPE html> 
<html >
  <head>
  </head> 
  <body> 
    <div class="trPic"> 
      <div class="redO"> 
      </div> 
    </div> 
  </body> 
</html>

覆盖不隐藏所有底层div

3 个答案: