如何扩展视差图像以覆盖整个屏幕宽度和高度直至导航。 我似乎无法通过容器。 我试过删除容器上的边距参数 我也尝试为视差类提供 100% 的全宽，但没有做任何事情。 基本上我希望上半部分看起来像这样。 http://www.toonsville.co.uk/aboutus.html而不是有容器边缘。目前它看起来像这样 http://toonsville.co.uk/learn.html
body,html{
height: 100%;
}
.container{
margin: 0 auto;
background-color: #ffcc66;
font-size: 24px;
padding: 50px;
position: relative;
}
.parallax {
min-height: 400px;
background: transparent;
}
.container img{
height: 10em;
position: absolute;
left: 40em;
top:11em;
z-index: 1;
}
h2{
color:#FFD;
font-size:3em;
font-family: 'Sigmar One', cursive;
padding-top: 4em;
padding-left: 1em;
position: relative;
z-index: 1;
}
.innercontainer{
background-color:#ffcc66;
padding: 2em;
}
.aboutus {
background-color: #ffd;
font-size:25px;
font-family: 'Handlee', cursive;
padding: 2em;
border: 4px solid darkred;
border-radius: 50px;
-webkit-box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
-moz-box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
}<body>
<nav>
<header class="clearfix">
<div class="topnav" id="myTopnav">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="aboutus.html"><i class="fa fa-fw fa-envelope"></i> About us</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i>Contact us</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i>Shop</a>
<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>
</header>
</nav>
<title>The about us page</title>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image- src="images/moudarkbackground.png"
data-speed="0.3">
<h2>ABOUT US</h2>
</div>
<img src="images/timon.png">
<div class="innercontainer">
<p class="aboutus">Whether you’re an executive accountant, work in a
factory or even a policeman, we all have one thing in common.
most of us have had the same conversion at
least once within the last 5 years.
Now you’re thinking that I’m possibly just making things up.
The conversation starts off something to this effect:
“Do you remember the cartoon?” We look at classic cartoons.
</p>
</div>
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="images/classictoons5.png">
<h2>saturday morning nostalgia!</h2>
</div>
</div>
</body>
</body>如何扩展视差图像以覆盖整个屏幕宽度和高度直至导航。 我似乎无法通过容器。 我试过删除容器上的边距参数 我也尝试过为视差类提供 100% 的全宽，但没有做任何事情。
最佳答案
您应该尝试在视差 CSS 中提供背景图像。
.parallax {
min-height: 400px;
background: transparent;
background-image: url(images/moudarkbackground.png);
background-size: cover;
}
背景大小:覆盖；在不拉伸(stretch)图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会对其进行垂直或水平裁剪，以免留下空白。
关于html - 我如何将视差图像的宽度扩展到全宽和全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53075247/