Question

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

我的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和灰色背景叠加层。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我更新了一些帖子，其中包含一些代码，可能非常有助于模拟YouTube，例如叠加。

＆＃13;

$(document).ready(function() {
  $(".overlay, .close").hide();
  $("#btnClickme").bind("click", function() {
    $(".overlay, .close").fadeIn();
    $(".wrapper-btn").fadeOut();
  });
  $(".btnClose").bind("click", function() {
    $(".overlay, .close").fadeOut();
    $(".close").unbind("click");
    $(".wrapper-btn").fadeIn();
  });
});

＆＃13;

* {
  font-family: 'arial';
  font-size: 12px;
}

.close a {
  color: #ffffff;
  right: 0px;
  top: 0px;
  font-size: 10px;
  position: relative;
  z-index: 1;
  display: block;
  text-decoration:none;
  font-size:13px;
}

.close {
  position: absolute;
}

.overlay-wrapper {
  float: left;
  width: 200px;
  height: 200px;
  position: absolute;
  padding: 10px;
}

.wrapper-row {
  float: left;
}

.overlay {
  float: left;
  position: relative;
  background-color: #000000;
  width: 200px;
  height: 200px;
  margin: 10px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE 8 & 9 (more valid) */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-wrapper'>
  <div class="wrapper-row">
    <img src="http://via.placeholder.com/200x200" />
  </div>
  <div class="wrapper-row wrapper-btn">
    <input type="button" id="btnClickme" name="btnClickme" value="click here" />
  </div>
  <div class="close">
    <a href="javascript:void(0);" class="btnClose">
    (close)
    </a>
  </div>
</div>

<div class="overlay"></div>

＆＃13;

Answer 3

我想在这种情况下添加使用 css过滤器的可能性，作为一种辅助技术。

它们现在可以在很多浏览器中广泛使用，我们可以用它们做很好的东西，而无需添加叠加层。

在这个简单的例子中，使用了模糊滤镜。过滤器仅通过javascript添加。这样，就不需要修改html或css了。它很有用。

我从顶部答案中获取了html，这是执行此操作的常规方法。

document.getElementsByClassName("content")[0].setAttribute("onclick","this.style.filter='blur(2px)'")

<div class="overlay">Some text
</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>

css过滤器列表：

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 4

以下示例仅使用叠加包装的visibility和opacity进行播放。

$("#click").on("click", function(){
    $(".orientation-check-wrapper").toggleClass('show-overlay');
});

.orientation-check-wrapper {
    height: 100vh;
    position: fixed;
    width: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99;
    top: 0;
    opacity:0;
    transition: .4s all;
    opacity: 0;
    visibility: hidden;
}
.orientation-check-text {
    top: 100px;
    right: 0;
    left: 0;
    bottom:0;
    position: absolute;
    margin: 0 auto;
    width: 390px;
    height: 18px;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 0 10px #3493c1;
    font-size: 13px;
    color: #000;
    text-align:center;
    font-family: sans-serif;
}

.show-overlay{
    opacity: 1;
    visibility: visible;
}

#click{
  z-index: 999;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click" id="click" />

<div class="orientation-check-wrapper">
    	<div class="orientation-check-text">This application is best supported on resolutions above 800px</div>
    </div>

Answer 5

假设你有这样的结构

<aside class="sidebar">
   <!-- Stuff-->
</aside>
<section class="content">
    <!-- More stuff -->
</section>

当栏打开时，

和open类被添加到sidebar，您可以使用相邻的兄弟组合来获取叠加层

.sidebar.open + .content:before {
    width: 100%;
    position: fixed !fixed;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5) !important;
    z-index:0;
    cursor: pointer;
}

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

5 个答案: