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

现在头部大小是静态的。例如，如果我想更改图像大小或更改我的设备，它会与我的基础导航相冲突（在这种情况下，由于其绝对标签，导航只是在图像下方）。

如何将此标题更改为响应，而图像仍在彼此之上（前面和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); 
}

在浏览图片的是： Parallax Header

来源

2017-05-29 Shuzuka

希望这将帮助你

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

来源

2017-05-29 12:56:56

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

回答

相关问题