Question

我是前端的新手，我试图制作一个无法滚动的页面。我希望它是我背景的大小。当我将手形图像放在页面底部时，它会调整窗口的大小。当手移动时，窗口滚动条甚至可以自行滑动。如何确保尺寸固定？

html -

<!-- Page Content -->
<div class="container">
    <div class="row">
        <div class="wrapper">
            <ul id="scene">
                <li class="layer" id="bluelayer" data-depth="0.0"><img src="{%  static 'images/aboutus/BlueLayer.png' %}"></li>
                <li class="layer" id="booklayer" data-depth="0.0"><img src="{%  static 'images/aboutus/Book.png' %}"></li>
                <li class="layer" id="coffeelayer" data-depth="0.0"><img src="{%  static 'images/aboutus/Coffee.png' %}"></li>
                <li class="layer" id="handslayer" data-depth="0.6"><img src="{%  static 'images/aboutus/Hands.png' %}"></li>
                <li class="layer" id="keyboardlayer" data-depth="0.0"><img src="{%  static 'images/aboutus/Keyboard.png' %}"></li>
                <li class="layer" id="pencilonelayer" data-depth="0.0"><img src="{%  static 'images/aboutus/Pencil1.png' %}"></li>
                <li class="layer" id="penciltwolayer" data-depth="0.0"><img src="{%  static 'images/aboutus/Pencil2.png' %}"></li>
            </ul>
        </div>
    </div>
</div>

css -

body {
    margin-top: 0px;
    margin-bottom: 0px;
    background: none;
}

.full {
    background: url(../images/aboutus/Desk.jpg) no-repeat center center 
fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}


#bluelayer {
    margin-left: -9.5em;
    margin-top: -50px;
    width: auto;
    position: fixed;
    z-index: 3;
}

#booklayer {
    margin-left: -5em;
    margin-top: 350px;
    z-index: 1;
}

#coffeelayer {
    margin-top: 400px;
    margin-left: 80em;
    z-index: 1;
}

#handslayer {
    margin-top: 400px;
    margin-left: 25em;
    z-index: 2;
    position: fixed;
}

#keyboardlayer {
    margin-top: 400px;
    margin-left: 25em;
    z-index: 1;
}

#pencilonelayer {
    margin-top: 550px;
    z-index: 1;
}

#penciltwolayer {
    margin-top: 450px;
    margin-left: 70em;
    z-index: 1;
}

Answer 1

为什么不尝试启动容器上的overflow: hidden;。我不是100％明白你在这里工作的事情

停止调整窗口大小的视差

1 个答案: