我目前正在与Django合作进行一个项目。项目的主页/主页被锁定在登录表单的后面。我的背景模糊，并且登录表单位于迷离顶部，我希望删除该表单并在用户使用有效帐户登录时迷离。
这有可能吗？我应该去哪里看，谷歌搜索什么都没发现。
通过CSS应用模糊。
是否还可以阻止用户与模糊后面的元素进行交互，直到他们登录？
谢谢
home.html
{% extends "main/base.html" %}
{% block content %}
<div class='login-form'>
<form method="POST">
{% csrf_token %}
<div class='larger-form'>
<h3>Login Form</h3>
<div class='smaller-form'>
<p>
<label>username</label>
<input type="text" name="username">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<button type="submit" class='login'>Login</button>
Need an account? <a class='' href="{% url 'register-page' %}">Sign Up</a>
</div>
</div>
</form>
</div>
<div class="search-content">
<div class='bar-container'>
<h1> Search Here </h1>
</div>
<div class='searchbar-container'>
<p>
<input type="text" class="search-bar">
</p>
</div>
<div class='content-section'>
</div>
</div>
<style>
.search-content {
filter: blur(4px);
}
.login-form {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20%;
height: 30%;
display: grid;
z-index: 3;
}
.search-bar {
border-radius: 2px;
width: 40%;
margin-left: 30%;
}
.bar-container {
filter: blur(4px);
margin: auto;
text-align: center;
color: white;
background-color: #545452;
border-radius: 3px;
width: 75%;
box-shadow: 1px 1px 3px grey;
}
.searchbar-container {
margin: auto;
right: 50%;
}
h3 {
color: white;
}
.loginform {
margin-top: auto;
margin: 0 auto;
width: 300px;
}
.larger-form {
margin-top: 25px;
background-color: #545452;
border: 3px solid #545452;
border-radius: 8px;
box-shadow: 1px 1px 3px grey;
text-align: center;
}
.smaller-form {
background-color: white;
text-align: left;
}
.login {
border: none;
text-align: center;
font-size: 16px;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
}
.login:hover {
color: #42A5F5;
</style>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class='container'>
<div class='bar'>
<a href="{% url 'main-home' %}" class='button'>Home</a>
<a href="{% url 'register-page' %}" class='button'>Sign up</a>
</div>
{% block content %}
{% endblock %}
</div>
<div class='menu-bottom'>
<div id='colorstrip'>
</div>
</div>
</body>
<style>
.container {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background: white;
}
.bar {
background-color: #545452;
padding-top: 10px;
height: 50px;
align-items: end;
box-shadow: 2px 2px 5px black;
border-radius: 1.5px;
}
.button {
float: right;
padding-top: 5px;
padding-right: 20px;
border: none;
text-align: center;
font-size: 18px;
display: inline-block;
background-color: #545452;
color: white;
text-decoration: none;
}
.button:hover {
color: #42A5F5;
}
.menu-bottom {
position: absolute;
bottom: 10px;
width: 100%;
}
#colorstrip{
width: 100%;
height: 0px;
border-style: solid;
border-color: #545452;
border-radius: 1px;
background-color: white;
}
</style>
</html>
让我知道是否需要其他任何代码，或者是否格式化不正确。