问题:
标题大小现在是静态的。例如，如果我想更改图像大小或更改我的设备，它会与我的底层导航发生冲突(在这种情况下，由于绝对标签，导航仅位于图像下方)。
当图像仍然在彼此之上(前和背景)时，我如何更改此标题以响应？
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>关于html - 修复 css，使其相对于它的子项(/responsive)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44242683/