Question

我使用rgba值在css中设置了body标签的背景颜色。如果侧面菜单打开，我想更改alpha值，如果侧面菜单关闭，我想恢复它。

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

在CSS中：

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

我在侧面菜单中使用了类gn菜单并更改了

中的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;
}

如果我在课程gn-menu gn-open-all中给出了这个，那么将为菜单中的项目更改背景颜色。

但是alpha值没有改变。

如何更改Alpha值？

感谢。

Answer 1

您可以通过在侧面菜单打开时向身体容器添加css类来执行此操作，然后在关闭侧面菜单时将其删除。通过捕获该css类，您可以更改容器的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类添加到正文中。你可以使用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值

2 个答案: