Javascript 隐藏透明div后面的元素，但不隐藏背景

我有一个片段，我想在其中制作动画，登录菜单在其中展开，所以我想到了两种方法。要么改变登录菜单的左侧位置，要么在顶部做另一个div，移动后会慢慢显示登录菜单。但透明度的问题来了，在这两种方法中，我都想用另一个div覆盖div，但背景保持不变。css、js或jq有什么诀窍吗

const accountImg=document.querySelector（“#login”）；
让accountOpen=0；
document.querySelector（“#login”）.addEventListener（“单击”，函数（）{
如果（accountOpen==0）{
document.querySelector（“.login wrap”）.classList.add（“active”）；
账户开放=1；
document.querySelector（“#username”）.style.opacity=“1”；
document.querySelector（“#username”）.style.visibility=“visible”；
document.querySelector（“.label username”）.style.visibility=“visible”；
document.querySelector（“.content username”）.style.visibility=“visible”；
document.querySelector（“#username”）.style.visibility=“visible”；
document.querySelector（“#username”）.style.visibility=“visible”；
document.querySelector（“密码”）.style.opacity=“1”；
document.querySelector（“密码”）.style.visibility=“可见”；
document.querySelector（“.label password”）.style.visibility=“visible”；
document.querySelector（“.content password”）.style.visibility=“visible”；
document.querySelector（“密码”）.style.visibility=“可见”；
document.querySelector（“密码”）.style.visibility=“可见”；
document.querySelector（“.login wrap.login btn”）.style.opacity=“1”；
}否则{
document.querySelector（“.login wrap.active”）.classList.remove（“active”）；
accountOpen=0；
document.querySelector（“密码”）.style.opacity=“0”；
document.querySelector（“#password”）.style.visibility=“hidden”；
document.querySelector（“.label password”）.style.visibility=“hidden”；
document.querySelector（“.content password”）.style.visibility=“hidden”；
document.querySelector（“#password”）.style.visibility=“hidden”；
document.querySelector（“#password”）.style.visibility=“hidden”；
document.querySelector（“#username”）.style.opacity=“0”；
document.querySelector（“#username”）.style.visibility=“hidden”；
document.querySelector（“.label username”）.style.visibility=“hidden”；
document.querySelector（“.content username”）.style.visibility=“hidden”；
document.querySelector（“#username”）.style.visibility=“hidden”；
document.querySelector（“#username”）.style.visibility=“hidden”；
document.querySelector（“#登录消息”）.style.visibility=“hidden”；
document.querySelector（“.login wrap.login btn”）.style.opacity=“0”；
}
});
正文{
保证金：0；
背景：url（'https://lh3.googleusercontent.com/proxy/An3EDuoKa8Q75DplT1mH3_oHUHS0T6MkeVaHRbLO-0WSyZKv7yYz5SvddaAR5rqcfqQMu2G7wRSUyLix70v_51uyNRY6jeHKJ1CXIev6toY_x69dsa0sHZVAiGtzvt0GsbAcD1X0QqDQkXBC02DftWQIhbmKfhmnjbyCZpg'）不重复0 0滚动；
背景尺寸：封面；
背景滤镜：模糊（15px）对比度（.5）；
高度：100vh；
宽度：100vw；
}
.登录容器{
位置：固定；
宽度：50%；
高度：75px；
排名：0；
左：0；
z指数：2；
}
#登录{
位置：固定；
顶部：35px；
左：2%；
宽度：10%；
高度：40px；
边界半径：14px；
盒影：0px 3px 6px 00000029；
边框：1px实心#FFFFFF；
背景：rgba（0,0,0,0）；
字体系列：“Gordita常规”；
字号：18px；
字母间距：0px；
颜色：#FFFFFF；
文本阴影：0px 3px 6px 00000029；
文本对齐：居中；
字体大小：粗体；
光标：指针；
z指数：3；
}
#登录前端{
位置：固定；
宽度：12%；
高度：75px；
排名：0；
左：0%；
z指数：5；
}
.login-wrap.active{
位置：固定；
宽度：32%；
高度：75px；
排名：0；
左：15%；
z指数：2；
动画：推出1.2秒轻松；
}
@“关键帧”卷展栏{
0% {
左-40%；
} 100% {
左：15%；
}
}
.login wrap>input{
位置：相对位置；
宽度：120px；
高度：20px；
不透明度：0；
边界：无；
左侧填充：4px；
}
.login wrap:：after{
内容：''；
宽度：0；
高度：30px；
位置：绝对位置；
顶部：40px；
左-5%；
左边框：1px实心#FFFFFF；
不透明度：0.42；
}
/*名字*/
#用户名{
宽度：46%；
身高：75%；
颜色：黑色；
最高：37%；
边界：没有！重要；
大纲：0；
背景：rgba（0,0,0,0）；
左侧填充：0！重要；
颜色：白色；
可见性：隐藏；
字号：17px；
字体系列：“Gordita常规”；
文本转换：无；
填充顶部：35px；
}
#用户名：-已选择内部自动填充{
背景色：白色！重要；
}
.标签用户名{
位置：绝对位置；
边界半径：0；
左：0；
最高：60%；
宽度：46%；
身高：50%；
指针事件：无；
边框底部：1px实心#BDBDBD；
背景：无；
文本缩进：0；
可见性：隐藏；
不透明度：0.82；
}
.内容用户名{
文本缩进：0；
位置：绝对位置；
最高：18%；
左：0；
转换：转换0.3s轻松，字体大小0.3s轻松；
颜色：白色；
可见性：隐藏；
转化：translateY（-160%）；
字体大小：12px；
}
.标签用户名：在{
内容：无；
职位：无；
顶部：无；
左：无；
宽度：无；
身高：无；
背景：无；
边界半径：无；
过渡：无；
}
/*赫斯洛*/
#密码{
左：4.25%；
宽度：49%；
身高：50%；
颜色：黑色；
最高：37%；
边界：没有！重要；
大纲：0；
背景：rgba（0,0,0,0）；
左侧填充：0！重要；
颜色：白色；
可见性：隐藏；
字号：17px；
字体系列：“Gordita常规”；
文本转换：无；
填充顶部：35px；
}
#密码：-已选择内部自动填充{
背景色：白色！重要；
}
.标签密码{
位置：绝对位置；
边界半径：0；
左：51%；
wid
transition: width 1s ease-in-out