混合菜单背景效果答案

【问题标题】：Hybrid menu background effect混合菜单背景效果
【发布时间】：2016-05-05 11:25:28
【问题描述】：

我正在尝试在 Ionic 中创建这个菜单背景效果，但我不知道用什么来重新创建它。

起初我使用不透明度，但这并没有给我正确的效果。我也添加了模糊，但没有运气。

.menu-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  background: rgb(43,49,81);
  -webkit-filter: blur(5px);
  opacity: .8;
}

编辑：不是在谈论动画。

【问题讨论】：

How to create a frosted glass effect using CSS?的可能重复
查看建议的副本，我认为效果就是您所追求的。
在这里试试我的 CSS 滤镜游乐场：brainlessdeveloper.com/definitive-guide-css-filter-wizardry/… 您可以添加自己的图片并尝试结合其他滤镜的模糊效果。
问题是，我没有图像。菜单是一个叠加层，但我想那不是要走的路吗？
@cybermonkey 我确实已经看过了，但没有设法让事情像我想要的那样工作

【解决方案1】：

通过上述解决方案，我在菜单悬停的整个内容中添加了一个模糊过滤器。

简而言之：

<div id="menu"></div>
<div id="content">
  <!-- content goes here -->
</div>

CSS

#menu{
 opacity:0.9;
}
#content{
   filter: blur(4px); -webkit-filter: blur(4px);
}

【讨论】：