文章/答案/技术大牛

发布

社区首页 >问答首页 >使用单独的div对整个项目应用过滤器

问使用单独的div对整个项目应用过滤器
EN

Stack Overflow用户

提问于 2017-03-09 02:40:59

回答 1查看 24关注 0票数 0

我想做一个覆盖类。我的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做到这一点吗？

html

css

sass

回答 1

Stack Overflow用户

发布于 2017-03-09 02:56:58

您可以在流程中使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42679379

复制

相似问题

问使用单独的div对整个项目应用过滤器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用单独的div对整个项目应用过滤器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用单独的div对整个项目应用过滤器
EN