Question

我正在创建一个模式弹出窗口，提醒用户，并在页面上叠加。

我正在尝试使背景模糊（因此页面上的内容被遮挡），但模态弹出窗口很清晰。

这是一个例子，模态在几秒钟后消失。我已将filter: blur应用于.modal-newsletter-wrap，这是包含在整个页面中的包装器。我的意图是页面上的文字和猫图像会模糊，但它们仍然很清晰：http://codepen.io/anon/pen/Ggzxdz

此外，尽管在内部div filter: blur(0);上设置了.modal-newsletter，但它仍然继承了包装div的模糊。

.modal-newsletter-wrap {
  background-color:rgba(243,243,232,0.5);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.modal-newsletter{
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -o-filter: blur(0);
  -ms-filter: blur(0);
  filter: blur(0);
}

Answer 1

.modal-newsletter是.modal-newsletter-wrap的孩子，因此，如果您在.modal-newsletter-wrap上设置模糊过滤器，那么无论您设置.modal-newsletter，它都将适用于blur(0)在子元素.modal-newsletter上。

你可以设置<p><p>上的模糊，它现在包含你的页面主体（包括猫和所有东西），所以模糊不会被带到模态弹出窗口。

See this codepen，您需要在模式打开时使用javascript设置内容模糊的样式。

<小时/> 另一个解决方案是在页面上放置一个叠加层，而不是.modal-newsletter-wrap的（不是父对象），并为其添加模糊。与this

一样

Answer 2

将除叠加层之外的所有内容包装在公共父元素（例如<main>元素）中，然后在5秒后运行模糊动画

http://codepen.io/anon/pen/EarEzo

@-webkit-keyframes blur {
   0% { -webkit-filter: blur(0px); }
   100%   { -webkit-filter: blur(5px); }
}
@-moz-keyframes blur {
   0% { -moz-filter: blur(0px); }
   100%   { -moz-filter: blur(5px); }
}
@keyframes blur {
   0% { filter: blur(0px); }
   100%   { filter: blur(5px); }
}

main {
  -webkit-animation: blur 1s linear 5s 1 forwards;
  -moz-animation: blur 1s linear 5s 1 forwards;
  animation: blur 1s linear 5s 1 forwards;
}

在此示例http://codepen.io/anon/pen/gbqeVV中，我还通过CSS :target伪类激活了关闭操作。如果overlay元素是内容包装器的兄弟，那么您可以将“close”标签转换为链接，如示例中所示，然后添加此样式

#close-layer:target {
  display: none; 
}

#close-layer:target ~ main {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;

  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  filter: blur(0);
}

也可以在不设置散列的情况下实现相同的效果，例如使用隐藏的复选框和:checked伪类：http://codepen.io/anon/pen/XJOqJV

#closeoverlay { display: none; }

#closeoverlay:checked ~ .modal-newsletter-wrap {
   display: none;
}


#closeoverlay:checked ~ main {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;

  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  filter: blur(0);
}

Answer 3

另一种方法只是一行 css：backdrop-filter: blur(1rem);:

<div class="some-background">
  <div style="backdrop-filter: blur(1rem);"></div>
</div>

模糊绝对定位div仅限于使用CSS3隐藏内容

3 个答案: