gpt4 book ai didi

javascript - 打开侧边导航时正文中图像的不透明度

转载 作者:行者123 更新时间:2023-12-02 13:49:17 25 4
gpt4 key购买 nike

我想在侧导航打开时更改 body 的不透明度。它工作完美!但现在我面临的问题是,我的图像不会获得这种效果,它们仍然像以前一样明亮。我该如何更改它,使图像和所有其他内容(例如 iframe 内容)获得相同的效果?

这是 body 不透明度的工作代码:

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.6)";
}

问候

最佳答案

尝试

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.opacity = "0.6";
}
<小时/>

编辑:如果您的结构如下,这实际上可能有点问题:

<body>
<!-- some content -->
<div id="mySidenav">
<!-- sidebar content -->
</div>
</body>

如果是这样,那么上面的函数将使你体内的所有内容(包括侧边栏)变成半透明。

所以我会尝试将所有内容包装在一个单独的 div 中作为包装并使其不透明:

<body>
<div id="wrap">
<!-- original body content -->
</div>
<div id="mySidenav">
<!-- sidebar content -->
</div>
</body>

并更新 JS 函数以反射(reflect)这一变化:

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("wrap").style.opacity = "0.6";
}

另外 - 如果你有一些依赖 body 的 css,它可能会有点损坏,所以你可能也需要尝试一下。

关于javascript - 打开侧边导航时正文中图像的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41129649/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com