jquery - 出现侧边菜单时如何使网站的主要内容/画布变暗？

Question

我目前正在使用 Bootstrap 3，特别是 Jasny Off Canvas Reveal Menu 模板，请参见此处：

https://jasny.github.io/bootstrap/examples/navmenu-reveal/

一切都很好，但是我想实现什么并且不确定如何做，因为我不确定单击汉堡菜单图标以显示侧面菜单时会触发什么单击事件，但基本上，我想在这里实现结果在这个站点上，当在上面的 Jasny 示例上按下菜单图标时，即显示：

http://material-ui.com/#/

在 Material-UI 网站上，菜单右侧的主要内容/画布在菜单显示时变暗，然后在侧边菜单消失时恢复到原始状态。

我想为 jasny off canvas 显示示例菜单单击来实现这一点。最主要的是，它需要在 IE8 浏览器上运行。

Answer 1

你可以简单地添加这个 CSS：

.canvas-slid:after,
.canvas-sliding:after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: auto;
    z-index: 9999;
    background: rgba(0,0,0,0.5) !important;
    background: url(./alpha.png);
}

由于 IE<=8 不支持 rgba() 您可以使用 1x1px 50%alpha-PNG 作为 BGimage 1。