Question

我在玩背景滤镜：在chrome 76中。我正在尝试制作一个包含2个div的菜单，每个菜单上都有一个背景滤镜。第一个div效果很好，但是第二个div没有应用滤镜效果。当我删除第一个div的过滤器时，第二个起作用。有什么想法吗？编辑：codepen链接：https://codepen.io/andrewthegreat5/pen/LKzaEL 编辑2：所以这很奇怪。当我撰写这篇文章时，我在chromebook上运行chrome 76 beta。我还没有在其他设备上尝试过它。我只是在chrome 76上针对Android和台式机尝试过此操作，但效果根本不起作用。我认为现在可能只是越野车

HTML

<div id="mySidenav" class="sidenav" onmouseover="openNav()">
    <a class="active" href="#">Home</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
    <a href="#" target="_blank">page4</a>
    <div id="mouse" class="mouseout" onmouseout="closeNav()">
        <div class="flyoutTab">Menu</div>
    </div>
</div>

CSS

.sidenav{
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.1);
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 4%;
  backdrop-filter: blur(5px);
}

.mouseout{
  height: 100%;
  width: 5%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  overflow-x: hidden;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}

Answer 1

看起来像背景过滤器：不能与div汤配合使用，我将其分解并且效果很好。

Answer 2

一个理想的方法是在你的样式表中创建类，比如

.remove-blur {
    backdrop-filter: none;
  }

  .add-blur {
    backdrop-filter: blur(80px);
  }

然后开始使用 Javascript 通过 DOM 切换您想要应用它的位置

一次只能使用一个背景滤镜

2 个答案: