Question

我有一个带有背景图片的页面和六个links的图块，所有这些都包含在<div id = "main">中。我还有side navbar点击时将内容推向右侧我还要为#main添加一些不透明度，但我被卡住了。
下面是我的Side Navbar的javascript代码，我试图更改backgroundColor，我知道这显然是错误的。有没有办法为整个页面添加不透明度？

document.getElementById("myBtn").addEventListener("click", toggleNav);

function toggleNav(){
    navSize = document.getElementById("mySidenav").style.width;
    if (navSize === "400px") {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("mySidenav").style.width = "400px";
        document.getElementById("main").style.marginLeft = "400px";
        document.getElementById("main").style.backgroundColor = "yellow";
}
function close() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.getElementById("main").style.backgroundColor = "white";
}

Answer 1

您并非完全错误，您必须使用RGBA的rgba()或十六进制表示法。您可以在here上详细了解相关信息。您可以在项目中使用它， document.getElementById("main").style.background = "rgba(0,0,0,0.4)";
上面的代码会将background设置为black，将opacity设置为0.4。

或者，如果您只想切换不透明度，则必须设置opacity css属性，如下所示

document.getElementById("main").style.opacity = 0.4
其中0.4是不透明度值。范围从0到1，其中1代表完全可见，0代表完全隐藏。您可以在MDN

上阅读更多内容

向页面添加不透明度

1 个答案: