如何模糊 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>

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

How can I blur div tag and edit index?

html

css

blur