Bootstrap中窗体的模糊背景
Bootstrap中窗体的模糊背景
提问于 2019-11-15 11:38:39
到目前为止我的代码
我知道我的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和后台particle.js。
我试了5个小时，但还是不行，希望你们谁能帮我。提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-15 14:55:03
只需将此行添加到表中
backdrop-filter: blur(10px);Stack Overflow用户
发布于 2019-11-15 11:50:21
尝尝这个
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58869997
复制相关文章
相似问题
腾讯云开发者
