我目前正在与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>
请告诉我是否需要任何其他代码，或者此代码的格式是否不正确。
是。您可以像这样包装内联CSS代码：
{% if not user.is_authenticated %}filter: blur(4px);{% endif %}
此外，您可以通过将pointer-events: none;添加到不希望与之交互的内容上方的元素类中来禁用与BG内容的交互。