为页面添加不透明度

Question

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

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