我想要一个适合容器元素的图像,但我的代码只显示图像的一半,没有所需的视差效果。谁能解释为什么它不显示完整图像?
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.container {
height: 400px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.details {
height: 638px;
width: 100%;
background-color: #00e5de;
}
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<div id="short-des">
</div>
</div>
<div class=details>
</div>
最佳答案
使用 100vh
作为您的 .container
高度
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.container {
height: 100vh;
width: 100%;
max-width: 100%;
overflow: hidden;
background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.details {
height: 638px;
width: 100%;
background-color: #00e5de;
}
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<div id="short-des">
</div>
</div>
<div class=details>
</div>
vh:视口(viewport)高度的百分之一。
关于html - 滚动时的视差效果问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40035434/