为页面添加不透明度

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

上阅读更多内容

为页面添加不透明度

adding opacity to page

html

javascript

css

opacity