如何将移动物体与背景居中？答案

【问题标题】：How to center moving objects with background?如何将移动物体与背景居中？
【发布时间】：2016-04-20 23:52:47
【问题描述】：

我的背景图片是 1080x648 像素，我将其居中。我输入了一个迷你游戏的 javascript 代码，其中图像文件将在屏幕上移动，但是，图像文件从屏幕左侧开始，在我的背景图像之外。有没有办法将它与我的背景一起居中？

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

   function runIt(me) {
      $(me).css("top",Math.random()*500)
      .animate({"left":"1000px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500)})
      .animate({"left":"0px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500);runIt(me)});
   }
   $(".target").each(function(){runIt($(this))});

score = 0;
function calcScore(me){
  $(me).hide();
  score++;
  $("#message").html("You shot "+score);
  if(score==6){
    alert("Congratulations! You cleared the lake!");
    window.location.href = "alfheim_lake.html";
  }
}

$(document).ready(function(){
  $(".target").each(function(){runIt($(this))});
})

window.onload = function(){
   setInterval(function(){
       alert("You have drowned.");
       window.location.href = "game_2.html";
   }, 60000);
};
</script>
<body>
<div id="container">
<div id="background">
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
</div>
</div>
</body>

这是我的 CSS 文件：

@charset "UTF-8";

body {
  line-height:0;
  text-align:center;
  padding:8px;
  padding-left:80px;  
}

#container {
    overflow:hidden;
    float:left;
    width:1080px;
    height:648px;
}

#background {
    background-image:url(images/underwater.jpg);
    width:1080px;
    height:648px;
    float:left;
    overflow: hidden;
    background-repeat:no-repeat;
}

.target {
    position:absolute;
    width:80px;
    height:80px;
    cursor:pointer;
}

【问题讨论】：

查找 CSS 属性 background-size: cover 结合 background-position

标签： javascript html css center dreamweaver

【解决方案1】：

我认为这一定对你有用

#background{ 
 width:1080px;
 height:648px;
 float:left;
 background: url(images/underwater.jpg) no-repeat center center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 overflow: hidden; 
 }

【讨论】：