我正在尝试将 antoine-barres.jpg 背景图像一直移动到后面，然后是 clouds.png，然后是登录容器一直到前方。我该怎么做，我已经尝试过 z-index 但不确定它是如何工作的，我已经尝试过但是没有想法，请帮忙。
<body>
<div class="wrapper">
<div class="page-header" style="background-image: url('../assets/img/antoine-barres.jpg');">
<div class="container">
<div class="row" style="z-index:9999;">
<div class="col-lg-4 ml-auto mr-auto">
<div class="card card-register">
<h3 class="title">Welcome</h3>
<form class="register-form">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
<button class="btn btn-danger btn-block btn-round">Register</button>
</form>
<div class="forgot">
<a href="#" class="btn btn-link btn-danger">Forgot password?</a>
</div>
</div>
</div>
</div>
<div class="footer register-footer text-center">
<h6>© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
</div>
</div>
</div>
<div class="moving-clouds" style="background-image: url('../assets/img/clouds.png');">
</div>
</body>
最佳答案
在容器
<div class="wrapper">
<div class="page-header" style="background-image: url('../assets/img/login-image.jpg');">
<div class="filter"></div>
<div class="moving-clouds" style="background-image: url('http://demos.creative-tim.com/paper-kit-2/assets/img/clouds.png');">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 ml-auto mr-auto">
<div class="card card-register">
<h3 class="title">Welcome</h3>
<div class="social-line text-center">
<a href="#pablo" class="btn btn-neutral btn-facebook btn-just-icon">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-neutral btn-google btn-just-icon">
<i class="fa fa-google-plus"></i>
</a>
<a href="#pablo" class="btn btn-neutral btn-twitter btn-just-icon">
<i class="fa fa-twitter"></i>
</a>
</div>
<form class="register-form">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
<button class="btn btn-danger btn-block btn-round">Register</button>
</form>
<div class="forgot">
<a href="#" class="btn btn-link btn-danger">Forgot password?</a>
</div>
</div>
</div>
</div>
<div class="footer register-footer text-center">
<h6>© <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>document.write(new Date().getFullYear())</script>2018, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
</div>
</div>
</div>
</div>
关于html - 如何将背景图像移到后面并将登录容器移到前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48020079/