Question

我想制作一个叠加课程。我的dom元素树看起来如下：

<body>
  <div id="root">
  </div>
  <div class="overlay">
    <div class="gaussian-blur"></div>
    <div class="modal"></div>
  </div>
</body>

#root是我的应用程序将呈现的位置。点击事件会有条件地将.overlay添加到dom中。我希望.overlay > .gaussian-blur在整个应用程序中应用掩码，不包括.overlay > .modal。

我的.gaussian-blur CSS如下所示：

.overlay > .gaussian-blur {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  position: absolute;
  filter: blur(6px);
  transition: filter 200ms ease-in-out;
}

但是，这似乎并没有模糊#root组件，就好像它是叠加层一样。

我可以直接将样式添加到将应用模糊的根组件，但不会添加到覆盖它的div上。

有没有办法用CSS做到这一点？

Answer 1

您可以在流程中使用sibblings和javascript或输入元素。

您只需在需要时（使用CSS或javascript）模糊根元素。

这是一个简单的CSS / HTML示例，input + label可以切换模态元素和模糊根

input#modal ~ .overlay {
  display:none;
}
.overlay {
  align-items:center;
  justify-content:center;
  position:fixed;  
  background:rgba(0,0,0,0.2);
  top:0;
  left:0;
  height:100%;
  width:100%;
}
input#modal:checked ~ .overlay {
  display:flex;
}
input#modal:checked ~ #root {
  filter:blur(3px);
}
.modal {
  background:white;
  border:solid;
  padding:1em;
  max-width:75%;
}
#modal {
  position:absolute;
  left:-9999px;
}
[for="modal"] {
  border:solid;
  text-decoration:underline;
  color:blue;
  padding:0.25em;
  background:lightgray;
}

#root {
background:url(http://lorempixel.com/800/800/nature/1);
background-size:cover
}

<!-- demo purpoe but usable for nowdays browsers -->
<input type="checkbox" id="modal"/>

<div id="root">
  <label for="modal">Show modal </label>
  <h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
  </div>
  <div class="overlay">
    <div class="modal">
  <label for="modal">Hide modal </label>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p>
    </div>
  </div>

在整个项目中应用过滤器，使用单独的div

1 个答案: