Question

问题：

标题大小现在是静态的。例如，如果我想更改图像大小或更改我的设备，它将与我的基础导航发生冲突（在这种情况下，由于其绝对标记，导航仅在图像下方）。

如果图像仍然在彼此之上（前和后），我如何更改此标题以进行响应？

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);
}

浏览器中的图片： Parallax Header

Answer 1

希望这会对你有所帮助

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

修复css所以它相对于它的孩子（/响应）

1 个答案: