个人中心
gpt4 book ai didi

javascript - 如何为屏幕下部设置背景？ CSS/HTML

转载 作者：太空宇宙 更新时间：2023-11-04 15:20:14 24 4
gpt4 key购买 nike

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

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

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

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

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

提前致谢。

编辑

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

最佳答案

我认为这可能是一个可能的想法。

您的页面中已经有一个 #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 () {});
});

这是一个 live example

关于javascript - 如何为屏幕下部设置背景？ CSS/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14673979/

24 4 0
文章推荐： css - 为什么 Wordpress 博客侧边栏在底部？
文章推荐： c++ - 静态初始化 C++，未设置值
文章推荐： java - 在 Tomcat7 上运行使用 Glassfish 4 开发的 Web 应用程序
文章推荐： C++素数没有给出正确答案
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com