问题：
标头大小现在是静态的。例如，如果我想更改图像大小或更改设备，它将与我的基础导航发生冲突（在这种情况下，由于其绝对标签，导航正好位于图像下方）。
当图像仍然彼此重叠（前和bg）时，如何更改此标头以进行响应？
的HTML
<div class="header-parallax">
<div class="box fore-box">
<div class="img fore"></div>
</div>
<div class="box bg-box">
<div class="img bg"></div>
</div>
</div>
造型
.header {
position: relative;
height: 518.75px;
width: 100%;
}
.header-parallax {
padding: 20px 20px 20px 20px;
}
* {
box-sizing: border-box;
}
.box {
position: absolute;
perspective: 400px;
width: 750px;
height: 478.75px;
overflow: hidden;
transform-style: preserve-3d;
transition: perspective 5s;
}
.fore-box {
z-index: 10;
}
.bg-box {
z-index: 5;
}
.img {
top: 0;
left: 0;
width: 750px;
height: 478.75px;
transition: all 5s;
}
.fore {
z-index: 10;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-foreground.png);
background-size: cover;
}
.bg {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-bg.jpg);
transform: translateZ(150px);
background-size: cover;
filter: blur(2px);
}
.box.on .fore {
transform: translateZ(200px);
filter: blur(1px);
}
.box.on .bg {
transform: translateZ(0);
filter: blur(0px);
}
在浏览器中的图像：
最佳答案
希望对你有帮助
<!DOCTYPE html>
<html>
<head>
<style>
.header {
position: relative;
height: 518.75px;
width: 100%;
}
.header-parallax {
padding: 20px 20px 20px 20px;
}
* {
box-sizing: border-box;
}
.box {
position: absolute;
perspective: 400px;
width: 750px;
height: 478.75px;
overflow: hidden;
transform-style: preserve-3d;
transition: perspective 5s;
}
.fore-box {
z-index: 10;
}
.bg-box {
z-index: 5;
}
.img {
top: 0;
left: 0;
width: 750px;
height: 478.75px;
transition: all 5s;
}
.fore {
z-index: 10;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-foreground.png);
background-size: cover;
}
.bg {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-bg.jpg);
transform: translateZ(150px);
background-size: cover;
filter: blur(2px);
}
.box.on .fore {
transform: translateZ(200px);
filter: blur(1px);
}
.box.on .bg {
transform: translateZ(0);
filter: blur(0px);
}
.header-parallax{
background: red;
position: fixed;
width: 100%;
z-index: 999;
}
</style>
</head>
<body>
<div class="header-parallax">
</div>
<div class="box fore-box">
<div class="img fore"></div>
</div>
<div class="box bg-box">
<div class="img bg"></div>
</div>
</body>
</html>