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

编程问答 2022-08-15

问题描述

所以我有这个代码段，我要在其中做动画，并在其中显示登录菜单，所以我大概有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);
  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);
  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);
  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);
  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>

解决方法

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

尝试将类“ login-wrap”的过渡设置为

transition: width 1s ease-in-out

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

P.s：还将溢出设置为隐藏

编辑：Here是有关使用高度/宽度“自动”设置过渡的好帖子：

htmljavascripttransparency

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...