打开侧边菜单时更改正文的 alpha 值

Question

我在 css 中使用 rgba 值设置了 body 标签的背景色。我想在侧边菜单打开时更改 alpha 值，并在侧边菜单关闭时将其还原。

我使用下面link中给出的源代码创建了侧边菜单。 http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

在CSS中：

body {
  background: rgba(1,1,1,0);
}

我已经将 class gn-menu 用于侧边菜单并更改了

中的 alpha 值

body.gn-menu gn-open-all {
   background: rgba(1,1,1,0.8);
}

也在

中尝试了不透明度

body.gn-menu gn-open-all {
   -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    opacity: 0.8;
}

如果我在 class gn-menu gn-open-all 中给出这个，那么菜单中的项目的背景颜色将会改变。

但是 alpha 值没有改变。

如何更改 alpha 值？

谢谢。

Answer 1

您可以通过在侧边菜单打开时将 css class 添加到您的正文容器，然后在侧边菜单关闭时将其删除来实现。通过捕捉 css class 你可以改变容器的 alpha。

Answer 2

如果您的目的是更改整个标签的不透明度，那么您的 css 规则是错误的。

解决方案：

body {
  background: rgba(1,1,1,0);
}

body.opened-menu {
  background: rgba(1,1,1,0.8);
}

然后修改_openMenu/_closeMenu函数，将opened-menu class添加到body中。您可以使用 jQuery 或普通的 javascript.

_openMenu : function() {
    if( this.isMenuOpen ) return;
    classie.add( this.trigger, 'gn-selected' );
    this.isMenuOpen = true;
    classie.add( this.menu, 'gn-open-all' );
    //add class to body
    document.getElementsByTagName("body")[0].classList.add("opened-menu")
    this._closeIconMenu();
},
_closeMenu : function() {
    if( !this.isMenuOpen ) return;
    classie.remove( this.trigger, 'gn-selected' );
    this.isMenuOpen = false;
    classie.remove( this.menu, 'gn-open-all' );
    //remove class to body
    document.getElementsByTagName("body")[0].classList.remove("opened-menu")
    this._closeIconMenu();
}

西蒙

打开侧边菜单时更改正文的 alpha 值

Change the alpha value of body when side menu is opened

javascript

html

css

background-color

alpha