Wie kann ich das div-Tag verwischen und den Index bearbeiten?

Ich habe Div-Tags verschachtelt. Ich möchte ihren Z-Index-Wert ändern und Unschärfe machen, die auf der hinteren Position ist. Aber es funktioniert nicht. Ich denke, in meinen Codes ist nur das hintere div unscharf, aber meine Eingaben sind auch unscharf, die vorne div sind. Danke für deine Hilfe.Wie kann ich das div-Tag verwischen und den Index bearbeiten?

.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>

Quelle

2016-09-21 Johnny

_ "in meinen Codes nur zurück div ist verschwommen, aber meine Eingaben sind auch verschwommen, die vor div befinden" _ - sie sind _not_ "vor" dieses div, sie sind _inside_ es, sie sind Nachkommen. Und wenn Sie ein Element effects _all_ seines Inhalts verwischen, können Sie nicht nur ein Element verwischen und seine Nachkommen davon unberührt lassen. Sie benötigen ein separates Element. – CBroe

@CBroe vielen Dank für Ihre Erklärung. Das Problem ist also klar. Das war wichtig für mich, um es besser zu machen. – Johnny

Sie können dies erreichen, indem div_back in absoluter Position in neuer .container

Prüfung die Bearbeitung in der 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>

setzen

Quelle

2016-09-21 08:09:05

Vielen Dank, es hat funktioniert! – Johnny

froh, Ihnen zu helfen! :) –

Wie kann ich das div-Tag verwischen und den Index bearbeiten?

Antwort

Verwandte Themen