如何在屏幕下部設置背景？ CSS / HTML

Question

我正在做這個...“游戲”。 目前，有個火柴人在四處走動。 還有一棵樹。 但這暫時不重要。 我正在嘗試將背景設置為屏幕的下部。 我環顧四周，似乎找不到答案。

我嘗試設置DIV包裝器，但是已經有一個將背景設置為藍色。 另外，如果要進行div包裝，則不能只選擇屏幕的下部。 我知道我可以做這樣的事情

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

但這是行不通的，因為它會將“保證金”應用於所有其他事物。 由於div包裝器包裝了整個頁面。

這是鏈接： http : //www.dotcomaftereverything.com/jquery/game 。
如您所見，整個頁面是藍色的。 因為天空的顏色。

提前致謝。

編輯

我不能使用margin-top，因為包裝器將包裝整個頁面，因此將其他所有內容都帶走了。這將導致空白頁面。

Answer 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 () {});
});

這是一個現場例子

Answer 2

嘗試添加位置，重復和附件

div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
background-position:bottom left;
background-repeat:repeat-x;
background-attachment:fixed;
}

Answer 3

使用這種方式：

div#wrapper {
    margin-top: 700px;
    background: url('terrain blah blah blah') bottom center repeat-x fixed;
}

Answer 4

將底部的絕對位置設置為0不會解決您的問題嗎？

<img src="http://img.wallpaperstock.net:81/floating-land-wallpapers_9536_1280x1024.jpg" style="position:absolute;bottom:0px;">

如何在屏幕下部設置背景？ CSS / HTML

問題描述

4 個解決方案

解決方案1
1 2013-02-03 15:42:47

解決方案2
0 2013-02-03 15:25:30

解決方案3
0 2013-02-03 15:26:19

解決方案4
0 2013-02-03 16:25:04

如何在屏幕下部設置背景？ CSS / HTML

問題描述

4 個解決方案

解決方案1 1 2013-02-03 15:42:47

解決方案2 0 2013-02-03 15:25:30

解決方案3 0 2013-02-03 15:26:19

解決方案4 0 2013-02-03 16:25:04

解決方案1
1 2013-02-03 15:42:47

解決方案2
0 2013-02-03 15:25:30

解決方案3
0 2013-02-03 15:26:19

解決方案4
0 2013-02-03 16:25:04