當打開側面菜單時更改身體的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值

回答

相關問題