Question

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

＆＃13;

.subnav-links li { 
    display:inline-block; width:100% 
}

＆＃13;

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

＆＃13;

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标签和编辑索引？

1 个答案: