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