divタグをぼかしてインデックスを編集するにはどうすればよいですか？

Question

divタグがネストされています。私は彼らのZ-インデックス値を変更し、背中の位置にあるぼかしを作りたい。しかし、それは動作していません。私のコードでは、バックdivのみがぼやけていますが、入力がぼやけていて、フロントdivに配置されていると思います。ご協力いただきありがとうございます。

.div_front{ 
 
\t background-color: antiquewhite; 
 
} 
 

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

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

Answer 1

あなたはHTML

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

編集を確認し、新しい .container

で絶対位置にdiv_backを置くことによってこれを達成することができます