时间戳

首页 > 解决方案 > Bootstrap中表单的模糊背景

html - Bootstrap中表单的模糊背景

问题描述

到目前为止我的代码

我知道我的 CSS 代码不是很好，如果你有更好的建议请告诉我。

.login-dark form {
  max-width: 320px;
  width: 90%;
  background: rgba(0, 0, 0, .5);
  padding: 40px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.login-dark .illustration {
  text-align: center;
  padding: 15px 0 20px;
  font-size: 100px;
  color: #2980ef;
}

.login-dark form .form-control {
  background: none;
  border: none;
  border-bottom: 1px solid #434a52;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: inherit;
}

.login-dark form .btn-primary {
  background: #214a80;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 26px;
  text-shadow: none;
  outline: none;
}

.login-dark form .btn-primary:hover,
.login-dark form .btn-primary:active {
  background: #214a80;
  outline: none;
}

.login-dark form .forgot {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #6f7a85;
  opacity: 0.9;
  text-decoration: none;
}

.login-dark form .forgot:hover,
.login-dark form .forgot:active {
  opacity: 1;
  text-decoration: none;
}

.login-dark form .btn-primary:active {
  transform: translateY(1px);
}

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  width: 320px;
  height: 424px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div id="particles-js">
    <div class="blur"></div>
    <div class="login-dark">

      <form method="post">
        <h2 class="sr-only">Login Form</h2>
        <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
        <div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"></div>
        <div class="form-group"><input class="form-control" type="password" name="password" placeholder="Password"></div>
        <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Log In</button></div><a class="forgot" href="#">Forgot your email or password?</a></form>
    </div>
  </div>
  <script src="particles.js"></script>
  <script src="js/app.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

我需要让表格的背景变得模糊，但我不明白如何。使用 Bootstrap 和 Backgroundparticle.js。

从 5 小时开始尝试，但它不会工作希望你们中的任何人都可以帮助我。提前致谢！

标签： htmlcss

解决方案

尝试这个

.login-dark form {
    max-width: 320px;
    width: 90%;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
 }
.login-dark .illustration {
  text-align: center;
  padding: 15px 0 20px;
  font-size: 100px;
  color: #2980ef;
}

.login-dark form .form-control {
    background: none;
    border: none;
    border-bottom: 1px solid #ffffff;
    padding: 15px 0 5px 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    color: #FFF;
    width: 100%;
}
 input::placeholder{
  color:#FFF;
 }
.login-dark form .btn-primary {
  background: #FFF;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 26px;
  text-shadow: none;
  outline: none;
}
.login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
  background: #214a80;
  outline: none;
}
.login-dark form .forgot {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #FFF;
  opacity: 0.9;
  text-decoration: none;
}
.login-dark form .forgot:hover, .login-dark form .forgot:active {
  opacity: 1;
  text-decoration: none;
}
.login-dark form .btn-primary:active {
  transform: translateY(1px);
}
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  width: 320px;
  height: 424px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<body>

    <div id="particles-js">
    <div class="blur"></div>
    <div class="login-dark">

        <form method="post">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"></div>
            <div class="form-group"><input class="form-control" type="password" name="password" placeholder="Password"></div>
            <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Log In</button></div><a class="forgot" href="#">Forgot your email or password?</a></form>
    </div>
</div>
    <script src="particles.js"></script>
    <script src="js/app.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

推荐阅读