[英]How do I set a background to the lower portion of screen? CSS/HTML
我正在做这个...“游戏”。 目前,有个火柴人在四处走动。 还有一棵树。 但这暂时不重要。 我正在尝试将背景设置为屏幕的下部。 我环顾四周,似乎找不到答案。
我尝试设置DIV包装器,但是已经有一个将背景设置为蓝色。 另外,如果要进行div包装,则不能只选择屏幕的下部。 我知道我可以做这样的事情
div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
}
但这是行不通的,因为它会将“保证金”应用于所有其他事物。 由于div包装器包装了整个页面。
这是链接: http : //www.dotcomaftereverything.com/jquery/game 。
如您所见,整个页面是蓝色的。 因为天空的颜色。
提前致谢。
编辑
我不能使用margin-top,因为包装器将包装整个页面,因此将其他所有内容都带走了。这将导致空白页面。
我认为这可能是一种灵魂。
您的页面中已经有一个#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 () {});
});
这是一个现场例子
尝试添加位置,重复和附件
div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
background-position:bottom left;
background-repeat:repeat-x;
background-attachment:fixed;
}
使用这种方式:
div#wrapper {
margin-top: 700px;
background: url('terrain blah blah blah') bottom center repeat-x fixed;
}
将底部的绝对位置设置为0不会解决您的问题吗?
<img src="http://img.wallpaperstock.net:81/floating-land-wallpapers_9536_1280x1024.jpg" style="position:absolute;bottom:0px;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.