当打开侧面菜单时更改身体的alpha值

我已经使用rgba值为css中的body标签设置了背景颜色。如果打开侧面菜单，我想更改Alpha值，如果侧面菜单关闭，我需要将其恢复。当打开侧面菜单时更改身体的alpha值

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

在CSS：

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

我已经使用侧菜单类GN-菜单和在

改变α值也尝试不透明度在

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值？

谢谢。

来源

2016-06-29 Newbie7988

你应该提供一些代码！ –

如果你能显示你的代码。这很容易帮助。 –

@ TeutaKoraqi编辑此问题。请检查它 – Newbie7988

如果您的目的是更改整个标签的不透明度，那么您的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(); 
}

西蒙娜

来源

2016-06-29 14:00:40

您可以通过在侧菜单打开时向您的身体容器添加css类来完成此操作，然后在关闭侧菜单时将其删除。通过捕捉这个CSS类，你可以改变你的容器的alpha值。

来源

2016-06-29 13:27:35

当打开侧面菜单时更改身体的alpha值

回答

相关问题