0

我正在制作这个……“游戏”。目前，它是一个四处走动的小火柴人。还有一棵树。但这暂时不重要。我正在尝试将背景设置为屏幕的下部。我环顾四周，似乎找不到答案。

我尝试设置 DIV 包装器，但我已经有一个可以使背景变为蓝色。另外，如果我要制作一个 div 包装器，我不能只选择屏幕的下部。我知道我可以做这样的事情

div#wrapper {
    margin-top: 700px;
    background-image: url('terrain blah blah blah');
}

但这不起作用，因为它将“边距”应用于其他所有事物。由于 div 包装器包装了整个页面。

这是链接： http: //www.dotcomaftereverything.com/jquery/game。
如您所见，整个页面是蓝色的。因为天空的颜色。

提前致谢。

编辑

我不能使用margin-top，因为包装器包裹了整个页面，因此将其他所有内容都删除了。这会导致空白页。

4

4 回答 4

1

我认为这可能是一个可能的灵魂。

您的页面中已经有一个#terrain元素，因此只需将与游戏相关的 HTML 代码部分包装到一个子容器中，添加一些 CSS 即可。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Life of an unlucky person</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
    </head>
    <body>
        <div id='wrapper'>
            <div id="playarea">
                <p>Left/Right arrow keys to move, space to sit down.</p><br />
                <img src='http://www.dotcomaftereverything.com/jquery/sprites/spritePerson.png' id='img' />
                <img id='sitting' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteSitting.png' />
                <img id='tree' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteTree.png' />
            </div>
            <div id='terrain'></div>
        </div>
    </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: lightblue;
}

#playarea {
    position: relative;
    width: 100%;
    height: 70%;
}

    #playarea p {
        margin: 0;
    }

    #img {
        position: relative;
        margin-top: 375px;
    }

    #sitting {
        position: relative;
        margin-top: 375px;
    }

    #tree {
        position: relative;
        margin-top: 100px;
        margin-left: 700px;
    }

#terrain {
    width: 100%;
    height: 100px;
    background-color: green;
}

JS

$(window).on('load resize', function () {
    var playarea = $('#playarea'),
        terrain = $('#terrain'),
        pageHeight = $(window).height(),
        areaHeight = playarea.height();
    terrain.css('height', (pageHeight - areaHeight) + 'px');
});

$(document).ready(function () {
    var sitting = $('#sitting'),
        image = $('#img');
    sitting.hide();
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which,
            arrow = {
                left: 37,
                up: 38,
                right: 39,
                down: 40,
                space: 32
            };
        switch (keyCode) {
            case arrow.left:
                if (!sitting.is(':visible')) {
                    image.add(sitting).stop(true).animate({
                        left: '-=60px'
                    }, 300, "linear");
                }
                break;
            case arrow.up:
                break;
            case arrow.right:
                if (!sitting.is(':visible')) {
                    image.add(sitting).stop(true).animate({
                        left: '+=60px'
                    }, 300, "linear");
                }
                break;
            case arrow.down:
                break;
            case arrow.space:
                image.fadeToggle(-100, function () {
                    sitting.fadeToggle(-100);
                });
                break;
        }
    });
    $('#sit').click(function () {});
});

这是一个活生生的例子

于 2013-02-03T15:42:47.823 回答
0

尝试添加位置，重复和附件

div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
background-position:bottom left;
background-repeat:repeat-x;
background-attachment:fixed;
}
于 2013-02-03T15:25:30.753 回答
0

使用这种方式：

div#wrapper {
    margin-top: 700px;
    background: url('terrain blah blah blah') bottom center repeat-x fixed;
}
于 2013-02-03T15:26:19.197 回答
0

将底部的绝对位置设置为 0 不能解决您的问题吗？ 

<img src="http://img.wallpaperstock.net:81/floating-land-wallpapers_9536_1280x1024.jpg" style="position:absolute;bottom:0px;">
于 2013-02-03T16:25:04.450 回答