将元素隐藏在透明 div 后面但不隐藏背景

Question

所以我有这个片段，我想在其中制作动画，登录菜单在其中展开，所以我考虑了 2 种方法。要么更改登录菜单的左侧位置，要么在顶部再创建一个 div，这将在移动后慢慢显示登录菜单。但是透明度的问题来了，在这两种方法中我都想用另一个 div 覆盖 div，但保持相同的背景。 css、js 或 jq 有什么技巧吗？

const accountImg = document.querySelector("#login");
let accountOpen = 0;

document.querySelector("#login").addEventListener("click", function () {
    if (accountOpen == 0) {
        document.querySelector(".login-wrap").classList.add("active");
        accountOpen = 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("#password").style.opacity = "1";
        document.querySelector("#password").style.visibility = "visible";
        document.querySelector(".label-password").style.visibility = "visible";
        document.querySelector(".content-password").style.visibility = "visible";
        document.querySelector("#password").style.visibility = "visible";
        document.querySelector("#password").style.visibility = "visible";

        document.querySelector(".login-wrap .login-btn").style.opacity = "1";
    } else {
        document.querySelector(".login-wrap.active").classList.remove("active");
        accountOpen = 0;
        document.querySelector("#password").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("#login-messages").style.visibility = "hidden";
        document.querySelector(".login-wrap .login-btn").style.opacity = "0";
    }
});

body{
  margin: 0;
  background: url('https://lh3.googleusercontent.com/proxy/An3EDuoKa8Q75DplT1mH3_oHUHS0T6MkeVaHRbLO-0WSyZKv7yYz5SvddaAR5rqcfqQMu2G7wRSUyLix70v_51uyNRY6jeHKJ1CXIev6toY_x69dsa0sHZVAiGtzvt0GsbAcD1X0QqDQkXBC02DftWQIhbmKfhmnjbyCZpg') no-repeat 0 0 scroll;
  background-size: cover;
  backdrop-filter: blur(15px) contrast(.5);
  height: 100vh;
  width: 100vw;
}
.login-container{
  position: fixed;
  width: 50%;
  height: 75px;
  top: 0;
  left: 0;
  z-index: 2;
}
#login{
  position: fixed;
  top: 35px;
  left: 2%;
  width: 10%;
  height: 40px;
  border-radius: 14px;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #FFFFFF;
  background: rgba(0,0,0,0);
  font-family: 'Gordita Regular';
  font-size: 18px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000029;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
}
#login-front{
  position: fixed;
  width: 12%;
  height: 75px;
  top: 0;
  left: 0%;
  z-index: 5;
}
.login-wrap.active{
  position: fixed;
  width: 32%;
  height: 75px;
  top: 0;
  left: 15%;
  z-index: 2;
  animation: RollOut 1.2s ease;
}
@keyframes RollOut{
  0% {
    left: -40%;
  } 100% {
    left: 15%;
  }
}
.login-wrap > input{
  position: relative;
  width: 120px;
  height: 20px;
  opacity: 0;
  border: none;
  padding-left: 4px;
}
.login-wrap::after{
  content: '';
  width: 0;
  height: 30px;
  position: absolute;
  top: 40px;
  left: -5%;
  border-left: 1px solid #FFFFFF;
  opacity: 0.42;
}
/* Name */
#username {
  width: 46%;
  height: 75%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#username:-internal-autofill-selected{
  background-color: white!important;
}
.label-username {
  position: absolute;
  border-radius: 0;
  left: 0;
  top: 60%;
  width: 46%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-username {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-username:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
/* Heslo */
#password {
  left: 4.25%;
  width: 49%;
  height: 50%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#password:-internal-autofill-selected{
  background-color: white!important;
}
.label-password {
  position: absolute;
  border-radius: 0;
  left: 51%;
  width: 49%;
  top: 60%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-password {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-password:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
.login-wrap .login-btn{
  position: absolute;
  right: -80%;
  top: 50%;
  width: 140px;
  height: 35px;
  border-radius: 6px;
  opacity: 0;
  cursor: pointer;
  color: black;
  background: rgba(0, 0, 0, 0);
  border: 1px solid white;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="login-container">
        <div id="login-front">
            <button id="login">Admin</button>
        </div>
        <div class="login-wrap">
                <input type="text" id="username" name="username" autocomplete="off" required placeholder="Přezdívka">
                <label for="username" class="label-username">
                    <span class="content-username">Přezdívka</span>
                </label>
                <input type="text" id="password" name="password" autocomplete="off" required placeholder="Heslo">
                <label for="password" class="label-password">
                    <span class="content-password">Heslo</span>
                </label>
                <ul id="login-messages"></ul>
                <button class="login-btn">Přihlásit</button>
        </div>
    </div>
</body>

Answer 1

建议这样做而不是两个 div：

尝试将class“login-wrap”上的转换设置为

transition: width 1s ease-in-out

只需将“login-wrap”元素的宽度从 0px 更改为您每次单击按钮时所需的宽度

P.s: 也将溢出设置为隐藏

编辑：Here 很好 post 关于使用 height/width“自动”设置转换：

将元素隐藏在透明 div 后面但不隐藏背景

Hide element behind transparent div but not background

javascript

html

css

transparency