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

Use this way:

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 に答える