html - 如何模糊 div 标签和编辑索引？

Question

我有嵌套的 div 标签。我想更改它们的 z-index 值并使位于后面位置的模糊。但它不起作用。我认为，在我的代码中只有后部 div 是模糊的，但我的输入也很模糊，它们位于前部 div。谢谢你的帮助。

.div_front{
	background-color: antiquewhite;
}

.div_back
{   border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
	filter: blur(2px);
    z-index: -1;
}	

<div class="div_back">
			<div class="div_front">
			<form>
					<label for="username"></label>
					<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
					<label for="password"></label>
					<input type="text" id="password" name="password"  style="text-align:center" placeholder="password">     
					<input type="submit" value="Sign In">	
					<div style="display:flex; padding:0px;">
					<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
					<input type="submit_signup" value="Sign Up">
					</div>
				</form>
			</div>		
</div>

Answer 1

你可以通过将 div_back 放在新的 .container 中的绝对位置来实现这一点

检查 HTML 中的编辑

.div_front{
	background-color: antiquewhite;
}

.div_back
{   border-radius: 5px;
    background-color: #f2f2f2;
    filter: blur(2px);
    z-index: -1;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
}
.container{
    position:relative;
    padding: 20px; 
}

<div class='container'>
<div class="div_back">
			
</div>
<div class="div_front">
			<form>
					<label for="username"></label>
					<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
					<label for="password"></label>
					<input type="text" id="password" name="password"  style="text-align:center" placeholder="password">     
					<input type="submit" value="Sign In">	
					<div style="display:flex; padding:0px;">
					<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
					<input type="submit_signup" value="Sign Up">
					</div>
				</form>
			</div>		
  </div>