Javascript Bootstrap 4-光泽效果和z索引_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript Bootstrap 4-光泽效果和z索引

javascript jquery html css twitter-bootstrap

Javascript Bootstrap 4-光泽效果和z索引,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在处理具有光泽效果的登录页面，但我对z索引有问题。我做了一个很好的覆盖，根据我的需要有响应高度，因为我有两个不同的表单，但我不能点击输入或点击链接，但复选框工作正常，我真的不明白。我试图手动更改它，但也不起作用。我应该做什么，如何才能让它工作 /* Login */ #login_box { width: 640px; background: inherit; overflow: hidden; border-radius: 8px; max-width: 50%;

我正在处理具有光泽效果的登录页面，但我对z索引有问题。我做了一个很好的覆盖，根据我的需要有响应高度，因为我有两个不同的表单，但我不能点击输入或点击链接，但复选框工作正常，我真的不明白。我试图手动更改它，但也不起作用。我应该做什么，如何才能让它工作

/* Login */

#login_box {
  width: 640px;
  background: inherit;
  overflow: hidden;
  border-radius: 8px;
  max-width: 50%;
  z-index: 2;
}

#login_box:before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  bottom: -25px;
  right: -25px;
  background: inherit;
  box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.3);
  filter: blur(800px);
  z-index: 0;
}

#login_box form {
  text-align: center;
  z-index: 2;
}

#login_box input {
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  margin: 20px 0;
  padding-bottom: 10px;
  font-size: 18px;
  z-index: 2;
}

#login_box input:focus,
#login_box input:active {
  border: 0;
  margin-bottom: 22px;
}

#LogRegTab {
  border: 0;
}

.box_sub {
  font-size: 15pt;
  text-align: left;
}

#register form {
  width: 80%;
}

.nav-tabs .nav-link {
  border: 0 !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  font-size: 15pt;
}

和HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <!-- Scripts (jQuery) -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" />
    <!-- Tittle -->
    <title>Test</title>
  </head>

  <body>
    <main class="container-fluid p-0 m-0">
      <section style="background-image: url('https://picsum.photos/1920/1080/?random');">
        <div class="container-fluid">
          <div class="row justify-content-center mt-5">
            <div class="col-xl-4">
              <!-- Tab panes -->
              <ul class="nav nav-tabs" id="LogRegTab" role="tablist">
                <li class="mr-2">
                  <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true" onClick="logHeight();">Login</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false" onClick="regHeight();">Register</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="row justify-content-center">
            <div id="login_box" class="col-xl-4 mb-5">
              <div class="tab-content" id="LogRegTabContent">
                <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                  <form action="" class="mx-auto">
                    <h1 class="box_header">Login</h1>
                    <div class="form-group">
                      <label class="sr-only" for="email">Email address</label>
                      <input type="email" class="form-control" id="email" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="password">Password</label>
                      <input type="password" class="form-control" id="password" placeholder="Heslo" required>
                      <div class="help-block text-right "><a href="">Forget the password ?</a></div>
                    </div>
                    <div class="form-group">
                      <button type="submit" class="btn btn-login btn-block">Sign in</button>
                    </div>
                    <div class="custom-control custom-checkbox mx-auto">
                      <input type="checkbox" class="custom-control-input" id="keeplogin">
                      <label class="custom-control-label" for="keeplogin">keep me logged-in</label>
                    </div>
                  </form>
                </div>
                <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
                  <form action="" class="mx-auto">
                    <h1 class="box_header pt-4">Register</h1>

                    <h2 class="box_sub">Kontakní údaje</h2>
                    <div class="form-group">
                      <label class="sr-only" for="email">Email address</label>
                      <input type="email" class="form-control" id="email" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="phone">Telefon</label>
                      <input type="phone" class="form-control" id="phone" placeholder="Telefon" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="name">Jméno</label>
                      <input type="name" class="form-control" id="name" placeholder="Jméno" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="surname">Příjmení</label>
                      <input type="surname" class="form-control" id="surname" placeholder="Příjmení" required>
                    </div>
                    <h2 class="box_sub">Registrační údaje</h2>
                    <div class="form-group">
                      <label class="sr-only" for="username">Uživatelské jméno</label>
                      <input type="username" class="form-control" id="username" placeholder="Uživatelské jméno" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="password">Password</label>
                      <input type="password" class="form-control" id="password" placeholder="Heslo" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="password">Password</label>
                      <input type="password" class="form-control" id="password" placeholder="Ověření hesla" required>
                    </div>
                    <h2 class="box_sub">Fakturační údaje</h2>
                    <div class="form-group">
                      <label class="sr-only" for="Streetandnumber">Ulice a č. p.</label>
                      <input type="Streetandnumber" class="form-control" id="Streetandnumber" placeholder="Ulice a č. p." required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="town">Obec</label>
                      <input type="town" class="form-control" id="town" placeholder="Obec" required>
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="PSC">PSČ</label>
                      <input type="PSC" class="form-control" id="PSC" placeholder="PSČ" required>
                      <select class="custom-select">
                        <option value="1">lorem</option>
                        <option value="2">lorem</option>
                        <option selected value="3">lorem selected</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <button type="submit" class="btn btn-login btn-block">Sign in</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <script src="js/dropdown_hold.js"></script>

  </body>

</html>

psuedo元素login_框：before位于输入的顶部。如果你把它的z-index改为-1，它至少可以解决chrome和firefox中的问题

#login_box:before {
  position: absolute;
  top: -25px;
  left: -25px;
  bottom: -25px;
  right: -25px;
  background: inherit;
  box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.3);
  filter: blur(800px);
  z-index: 0;
}

这对我来说确实有效。我也试过，效果很好。@JonathanChaplin&Coder\u ACJHP那里有一个fiddle with bug。。。谢谢你的回复！但当您删除内容时：；然后光泽效果消失了：/Updated我的答案。