Question

如何扩展视差图像以覆盖整个屏幕的宽度和高度，直至导航。我似乎无法通过容器。我尝试删除容器上的margin参数我也尝试过给视差类提供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>

如何扩展视差图像以覆盖整个屏幕的宽度和高度，直至导航。我似乎无法通过容器。我尝试删除容器上的margin参数我也尝试过给全100％的视差等级，什么也没做。

Answer 1

您应该尝试在视差CSS中提供背景图片。

.parallax {
            min-height: 400px;
            background: transparent;
            background-image: url(images/moudarkbackground.png);
            background-size: cover;
        }

背景大小：封面；在不拉伸图像的情况下尽可能缩放图像。如果图像的比例与元素不同，则可以垂直或水平裁剪图像，以确保没有空白空间。

Answer 2

将要在CSS中使用的背景图片赋予正文...

例如：

 <html>
<style>
body {
 background: url('image.jpg')
}
</style>

<body>

My Name is......

</body>


</html>

那样，它将位于body标签中所有内容的后面...

你明白吗？

如何将视差图像的宽度扩展到全宽和全高

2 个答案: