堆棧內存溢出
  簡體   English   中英

Bootstrap 4-光澤效果和Z索引

[英]Bootstrap 4 - Glossy effect and z-index

 原文  2018-02-10 16:41:56  7   1    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我正在使用具有光澤效果的登錄頁面進行操作，但我對（z-indexes）有問題。 我根據需要制作了一個具有響應高度的良好疊加層，因為我有兩種不同的形式，但是我無法單擊輸入或單擊鏈接，但是復選框可以正常工作，我真的不明白。 我試圖手動更改它，但是也沒有用。 我應該怎么做，如何使它起作用？ 

/* 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>

1 個解決方案

解決方案1
 1 已采納  2018-02-10 22:07:18

偽元素#login_box：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;
}

這是一個小提琴。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Z索引不生效？ Bootstrap 模態 z-index 創建類似 z-index 的效果 子菜單被隱藏，並且z-index無效 html2canvas z-index 無效 如何修復 Bootstrap 中的 z-index 問題？ jQuery WOW幻燈片/動畫效果：Z-Index問題 z-index不適用於jQuery中的懸停寬度效果 通過鼠標懸停效果更改div的z索引 Bootstrap Popover在Popup模式下不起作用（不是z-index）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM